个人中心
gpt4 book ai didi

html - 如何拉伸(stretch) div 高度以填充父 div - CSS

转载 作者：数据小太阳 更新时间：2023-10-29 09:07:27 25 4
gpt4 key购买 nike

我有一个包含 div 的页面，如下面的布局/屏幕截图所示:

layout

代码在这里:

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

#B,
#C,
#D {
  position: absolute;
}

#A {
  top: 0;
  width: 100%;
  height: 35px;
  background-color: #99CC00;
}

#B {
  top: 35px;
  width: 200px;
  bottom: 35px;
  background-color: #999999;
  z-index: 100;
  border: solid 4px #00CC00;
}

#B2 {
  margin-top: -35px;
  bottom: 0;
  background-color: #FFFFFF;
  width: 200px;
  overflow: scroll;
}

#B1 {
  height: 35px;
  width: 35px;
  margin-left: 200px;
  background-color: #CC0066;
}

#C {
  top: 35px;
  left: 200px;
  right: 0;
  bottom: 35px;
  background-color: #CCCCCC;
}

#D {
  bottom: 0;
  width: 100%;
  height: 35px;
  background-color: #3399FF;
}
<div id="container">
  <div id="A">A</div>
  <div id="B">
    <div id="B1">B1</div>
    <div id="B2">B2</div>
  </div>
  <div id="C">C</div>
  <div id="D">D</div>
</div>

我想调整 B2 div 的高度以填充(或拉伸(stretch)到)整个 B div(在图像中标有绿色边框)并且不要想要越过页脚 D div。这是一个工作 fiddle link (更新)。我该如何解决这个问题？？

最佳答案

假设你有

<body>
  <div id="root" />
</body>

使用普通 CSS，您可以执行以下操作。查看工作应用 https://github.com/onmyway133/Lyrics/blob/master/index.html 

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

使用flexbox，你可以

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

关于html - 如何拉伸(stretch) div 高度以填充父 div - CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5581799/

25 4 0
文章推荐： css - 仅使用 CSS 的图像悬停上的黑色透明覆盖？
文章推荐： css - 如何使用 Bootstrap2 将 div 居中？
文章推荐： css - 是否可以在 CSS3 box-shadow 中设置透明度？
文章推荐： css - SVG 中文本的背景色
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com