Question

我正在开发Web应用程序，并希望具有以下布局：

<div class="wrapper">
  --header--
  <div class="header">
  </div>
  --body--
  <div class="content">
     --header within body--
     <div class="sub-header">
     </div>
     ---scrollable content-
     <div class="scrollable-content">
     </div> 
  </div>
  --footer--
  <div class="footer">
  </div>
</div>

--css---
.wrapper {
 display: flex;
 flex-direction: column;
 height: 100vh;
}

.header {
 flex: 0 0 auto;
}

.content {
 overflow-y:scroll;
 flex: 0 1 auto;
}

我想通过滚动将剩余高度分配给“ scrollable-content” div。我遇到的答案是整个内容都是可滚动的，但事实并非如此。

任何帮助都会很棒。

谢谢。

Answer 1

在这里，我使用了简写的CSS属性flex来确定每个<div>的高度并设置overflow: scroll;。因此，其他元素不会在该元素溢出时滚动。

.wrapper {
  border: 1px red solid;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
}

.header {
  border: 1px red solid;
  flex: 0.2;
}

.content {
  border: 1px red solid;
  flex: 0.6;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
}

.sub-header {
  border: 1px red solid;
  flex: 0.15;
}

.scrollable-content {
  border: 1px red solid;
  flex: 0.85;
  overflow: scroll;
}

.footer {
  border: 1px red solid;
  flex: 0.2;
}

<div class="wrapper">

  <div class="header">
    --header--
  </div>
  <div class="content">

    <div class="sub-header">
      --header within body--
    </div>

    <div class="scrollable-content">
      ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br>      ---scrollable content--<br>
    </div>
  </div>

  <div class="footer">
    --footer--
  </div>
</div>

CSS布局：固定了内容中的页眉/页脚和子页眉

1 个答案: