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

2023年10月13日 178次阅读

晚间,

我正在努力进行布局(我总是在与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;
  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>
点赞