晚上,
我在布局方面苦苦挣扎(我总是在 CSS 方面苦苦挣扎,把它诅咒成一种特殊的 hell !)。 I've simplified as best I can and set up a plunk .我在追求以下...
- 内容到视口(viewport)的全高。
- 固定高度
<header>
和<footer>
与width: 100%
. <footer>
设置在视口(viewport)的底部。- 之间的其余空间是两列 - Col A 是固定宽度,Col B 填充视口(viewport)宽度的其余部分,两者都是
height: 100%
. - Col B 包含一个
<canvas>
水平居中。
这是我正在处理的 Angular 应用程序的布局,Col A 中的内容是根据应用程序中的数据生成的,因此它的高度将始终发生变化。我想要 <footer>
如果 Col A 达到大于视口(viewport)的高度,则被向下推,否则 <footer>
应保持在 bottom: 0
.
In my example你看到 <footer>
卡在底部,但如果您降低视口(viewport)高度,它最终会被 <canvas>
阻挡元素。我希望左侧 Col A 的内容发生同样的事情。随着元素的添加,我想要 <footer>
必要时向下推,如果视口(viewport)缩小,我希望 Col A 内容阻止 <footer>
.
目前 Col A 是 position: absolute
所以什么都不阻止,但如果我将它设置为 relative
它失去了它的全部高度(绿色背景)。基本上我一整天都在绕圈子。它早已不再是一个有趣的问题,而是成为一个真正的痛苦,所以如果你能提供任何建议,我将不胜感激。
不确定我是否已经很好地解释了自己。我会澄清是否可以,请问。
提前干杯
最佳答案
不要使用绝对定位。当您希望某些东西增长以填充可用空间时,请将 flexbox 与 flex-grow: 1
一起使用。
html {
height: 100%;
}
html, body, #page-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
margin: 0;
}
#page-wrapper {
flex-direction: row;
background-color: #ff6900;
}
header {
background-color: #9b9b9b;
height: 40px;
}
#ui-wrapper {
background-color: #00ff00;
width: 120px;
}
.filler {
background-color: gold;
height: 50px;
border-bottom: 3px double;
}
#display-wrapper {
margin-top: 40px;
flex-grow: 1;
}
canvas {
display: block;
border: solid 1px red;
margin: 0 auto;
}
footer {
background-color: #8e8e8e;
}
<header>Header</header>
<div id="page-wrapper">
<div id="ui-wrapper">
<div class="filler">x</div>
<div class="filler">x</div>
<div class="filler">x</div>
<div class="filler">x</div>
<div class="filler">x</div>
<div class="filler">x</div>
<div class="filler">x</div>
<div class="filler">x</div>
<div class="filler">x</div>
</div>
<div id="display-wrapper">
<canvas width="300px" height="300px"></canvas>
</div>
</div>
<footer>Footer</footer>
关于html - CSS 布局 - 动态列内容定义包装器高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40598969/