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;属性。

因此，如果你们中的任何人都有一个可以解决内容扩展的答案，那么页脚和容器都会很棒。

很抱歉，如果这个解释太深了，那就是＃34;深度＆＃34;。这个网站有一个非常自定义的设计，与大多数普通网站有很多不同。

此致
Hexsphere

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>

我希望这有帮助！

具有动态内容的静态页脚

1 个答案: