文章/答案/技术大牛

发布

社区首页 >问答首页 >制作一个柔性盒中部卷轴，而容器不占用100%的页面。

问制作一个柔性盒中部卷轴，而容器不占用100%的页面。
EN

Stack Overflow用户

提问于 2017-04-02 20:33:04

回答 1查看 2.1K关注 0票数 3

使一个柔性箱的孩子有一个滚动条而不是生长，采取一个固定的高度容器。在一个孤立的环境中很容易创建：

 #container {
  height: 100%;
  display: flex;
  flex: 0 0 auto;
  flex-flow: column;
}

#list {
  display: flex;
  flex-flow: column;
  overflow: auto;
}

https://jsfiddle.net/1yjk5ojp/

但假设我想使用页眉。我不知道它的确切大小，所以我不能使用阿诺特位置与默金。我也不能使用任何flex组件，因为它必须是固定的大小。

例如-添加了一个100 for头。

<div style="height: 100px;">
  <h1>Page header</h1>
</div>

https://jsfiddle.net/z6dsq822/1/

在未知尺寸分量之后，我还能做些什么来制作一个固定高度的组件吗？

我的约束是我不想要另一个滚动条，我希望标题在这个结构之外(它是一个具有不同视图的大型应用程序，标题位于模板中)

flexbox

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-02 20:54:40

将所有事物的父容器设置为flex column，并将#container设置为flex-grow: 1，以便占用可用空间，然后所有其他东西都可以正常工作。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  flex: 0 0 100px;
}

#container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
}

#list {
  display: flex;
  overflow: scroll;
  flex-direction: column;
  flex-grow: 1;
}

#top {
  flex: 0 0 20px;
  background-color: #db9277;
}

#bottom {
  flex: 0 0 20px;
  background-color: #db9277;
}

.row {
  height: 100px;
  background-color: #85d8d5;
}

<header>
  header
</header>
<div id="container">
  <div id="top"></div>
  <div id="list">
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="bottom"></div>
</div>

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43173235

复制

相似问题

问制作一个柔性盒中部卷轴，而容器不占用100%的页面。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问制作一个柔性盒中部卷轴，而容器不占用100%的页面。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问制作一个柔性盒中部卷轴，而容器不占用100%的页面。
EN