Question

以下HTML很简单，可以满足我的需求。绿色的身体向下伸展以填满窗户。

<body style="margin:0">
    <div style="height:100%;display:flex;flex-direction:column">
        <div style="background:#d0d0ff">
            This is a header
        </div>
        <div style="background:#d0ffd0;flex-grow:1">
            This is the body.
        </div>
    </div>
</body>

但是，如果我用一些弹性列替换该正文，并且我给它们height:100%，因为我希望它们伸展到底部，newdiv实际上得到的高度大于它的100％容器并导致所有内容滚动。为什么100％不是100％意味着这里？

<body style="margin:0">
    <div style="height:100%;display:flex;flex-direction:column">
        <div style="background:#d0d0ff">
            This is a header
        </div>
        <div style="background:#d0ffd0;flex-grow:1">
            <!-- The new part -->
            <div id='newdiv' style="display:flex;flex-direction:row; height:100%">
                <div style="background:#ffd0d0"> Col 1 </div>
                <div> Col 2 </div>
            </div>
        </div>
    </div>
</body>

Answer 1

您获得垂直滚动条的原因是因为您告诉col1和col2的div父级为height: 100%。这本身就是视口的全高。

来自您的代码：

<div id='newdiv' style="display:flex; flex-direction:row; height:100%">
    <div style="background:#ffd0d0"> Col 1 </div>
    <div> Col 2 </div>
</div>

除了这个div有一个兄弟：标题div，它也占用了空间。

因此，当浏览器进行高度计算时，结果如下：

100% + (computed height of header div) > viewport height = vertical scrollbar

不要使用定义的高度，而是考虑让flexbox完成工作。默认情况下，弹性项目沿着横轴扩展容器的整个长度。

因此，通过简单地声明display: flex，子元素将展开以填充所有可用空间（没有垂直滚动）。但由于height规则会覆盖此弹性设置，因此我们需要从任何弹性项目中删除height: 100%。

html, body { height: 100%; }

<body style="margin:0">
    <div style="height:100%;display:flex;flex-direction:column">
        <div style="background:#d0d0ff">
            This is a header
        </div>
        <div style="background:#d0ffd0;flex-grow:1; display: flex;"><!--adjustment here-->
            <div id='newdiv' style="display:flex;"><!--adjustment here-->
                <div style="background:#ffd0d0; display: flex;"> Col 1 </div>
                <div> Col 2 </div>
            </div>
        </div>
    </div>
</body>

原始代码有两处调整。

添加了display: flex
已移除height: 100%

Fiddle Demo

Answer 2

我会这样做。 demo

<body>
   <header>Header</header>
   <div class="body">
     <aside>abc</aside>
     <div class='inner'>content here</div>
   </div>
</body>

在你的CSS中

html,body{
  height: 100%;
}

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

}


.body{
  flex-grow:1;
  display: flex;
  align-items: stretch;

}

.inner{
  flex-grow: 1;
}

这为您提供了更好的html结构和可维护性

Answer 3

这个怎么样？ - http://codepen.io/arianalynn/pen/WragJP?editors=1010

pickerHeight = graphTypePicker.frame.size.height
graphTypePicker.hidden = true
scrollView.contentSize = CGSizeMake(scrollView.contentSize.width, scrollView.contentSize.height - pickerHeight

Answer 4

我已更新您的代码尝试，如果这可以帮助您。将高度设置为 100vh https://jsfiddle.net/ok20071g/1/

CSS高度100％使元素高度超过100％

4 个答案: