问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何拉伸 div 高度以填充父 div - CSS

社区维基
1
新手上路，请多包涵

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

布局

代码在这里：

 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 的高度来填充（或拉伸到）整个 B div （在图像中标有绿色边框）并且不想越过页脚D div 。这是一个工作小提琴 链接（更新）。我该如何解决这个问题？

原文由 Alfred 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 522
1 个回答
得票最新
社区维基
1

假设你有

<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%
}

原文由 onmyway133 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题