具有动态内容的静态页脚

Question

我有一个网站的自定义设计，其中包含作为背景的图像和包含内容的框。 The website design

所以我的 problem is 我有一个页面，该页面有一组手风琴按钮，可以展开比容器更大的内容。我希望容器保持相同大小并让内容溢出。

相关代码如下：

CSS

.background {
    background-image: url(/recources/images/page-background.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
    padding: 98px;
}

.web-content {
  display: table;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.web-content_row {
  display: table-row;
  height: 100%;
}

.web-content_row .web-content_height {
  overflow-y: auto;
  max-height: 100%;
  height: auto;
}

HTML

<body class="background">
  <section class="web-content">
    <div class="web-content_row web-content_height">
      <header>
        <!-- Header content -->
      </header>

      <section class="web-content_tutorials-menu">
        <button class="accordion-button">Title</button>
        <div class="panel">
        </div>

        <button class="accordion-button">Title</button>
        <div class="panel">
        </div>

        <button class="accordion-button">Title</button>
        <div class="panel">
        </div>

        <button class="accordion-button">Title</button>
        <div class="panel">
        </div>

        <button class="accordion-button">Title</button>
        <div class="panel">
        </div>
      </section>
    </div>

    <footer>
      <!-- Footer content -->
    </footer>
  </section>
</body>

只要单击手风琴按钮，内容就会将页脚和容器框推出页面，这对我来说有几个问题。首先我不希望容器随内容一起扩展，我希望内容溢出容器并且容器保持相同大小。其次，一旦内容大于视图高度，滚动条就不会出现。

现在，在问这个问题之前，我确实非常努力地自己弄清楚了这一点。我也有一些关于错误的理论。我认为页面不会滚动是因为 CSS 代码中的 display: table; 和 display: table-row; 属性。

因此，如果你们中的任何人有一个答案可以修复扩展页脚和容器的内容，那就太棒了。

对不起，如果这个解释太过分了"in depth"。这个网站有一个非常定制的设计，与大多数普通网站有很多不同。

此致，
六角球

Answer 1

以下是我如何保持您的 HTML 结构：

body {
  background: tomato; /* Simulates the photo background */
}

.web-content {
  background: #fff;
  width: 80vw;
  height: 70vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: auto;
}

footer {
  position: fixed;
  height: 10vh; /* change accordingly to your wishes */
  width: 80vw;
  background: aqua; /* oh yeah I like wicked colors */
  left: 10vw; /* (100 - 80) / 2 */
  bottom: 15vh; /* (100 - 70) / 2 */
}

<body class="background">
  <section class="web-content">
    <div class="web-content_row web-content_height">
      <header>
        <!-- Header content -->
      </header>

      <section class="web-content_tutorials-menu">
        <button class="accordion-button">Title</button>
        <div class="panel">
        </div>

        <button class="accordion-button">Title</button>
        <div class="panel">
        </div>

        <button class="accordion-button">Title</button>
        <div class="panel">
        </div>

        <button class="accordion-button">Title</button>
        <div class="panel">
        </div>

        <button class="accordion-button">Title</button>
        <div class="panel">
        foo<br>bar<br>foo<br>bar<br>
        foo<br>bar<br>foo<br>bar<br>
        foo<br>bar<br>foo<br>bar<br>
        foo<br>bar<br>foo<br>bar<br>
        foo<br>bar<br>foo<br>bar<br>
        </div>
      </section>
    </div>
  </section>
  <footer>
    <!-- Footer content -->
    Fixed footer heehaa
  </footer>
</body>

希望对您有所帮助！

具有动态内容的静态页脚

Static footer with dynamic content

html

css

overflow