html – CSS布局 – 动态列内容定义包装器高度

概述晚间, 我正在努力进行布局(我总是在与CSS斗争,把它诅咒到一种特殊的地狱！). I’ve simplified as best I can and set up a plunk.我追随以下…… >内容到视口的全高. >固定高度< header>和< footer>宽度：100％. >< footer>设置在视口的底部. >其间的空间是两列 – Col A是固定宽度,Col B填充视口宽度的其余部 晚间,
我正在努力进行布局(我总是在与CSS斗争,把它诅咒到一种特殊的地狱！). I’ve simplified as best I can and set up a plunk.我追随以下……

>内容到视口的全高.
>固定高度< header>和< footer>宽度：100％.
>< footer>设置在视口的底部.
>其间的空间是两列 – Col A是固定宽度,Col B填充视口宽度的其余部分,两者都是高度：100％.
> Col B包含< canvas>水平居中.

这是我正在处理的Angular应用程序的布局,并且Col A中的内容是基于应用程序中的数据生成的,因此它的高度将始终在变化.我想要< footer>如果Col A达到大于视口的高度,则向下推,否则< footer>应保持在底部：0.

In my example你看到< footer>粘贴到底部,但如果减小视口高度,它最终会被< canvas>阻止.元件.我希望左边的Col A的内容发生同样的事情.随着元素的添加,我想要< footer>如果有必要按下,如果视口收缩,我希望Col A内容阻止< footer>.

目前Col A是位置：绝对所以阻挡什么,但如果我把它设置为相对它会失去它的全高(绿色背景).基本上我整天都围着这个圈子走了几圈.它早已不再成为一个有趣的问题而已成为一种真正的痛苦,所以如果你能提出任何建议,我将非常感激.

不确定我是否已经很好地解释了自己.我会澄清,如果可以,请问.

提前干杯

解决方法 不要使用绝对定位.将FlexBox与flex-grow一起使用：1当您希望某些内容增长以填充可用空间时.

HTML {  height: 100%;}HTML,body,#page-wrapper {  display: flex;  flex-direction: column;  flex-grow: 1;  flex-shrink: 0;  @R_404_5553@: 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;  @R_404_5553@: 0 auto;}footer {  background-color: #8e8e8e;}

<header>header</header><div ID="page-wrapper">  <div ID="ui-wrapper">    <div >x</div>    <div >x</div>    <div >x</div>    <div >x</div>    <div >x</div>    <div >x</div>    <div >x</div>    <div >x</div>    <div >x</div>  </div>  <div ID="display-wrapper">    <canvas wIDth="300px" height="300px"></canvas>  </div></div><footer>Footer</footer>

总结

以上是内存溢出为你收集整理的html – CSS布局 – 动态列内容定义包装器高度全部内容，希望文章能够帮你解决html – CSS布局 – 动态列内容定义包装器高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。