javascript - 如何让一个相对定位的 child 获得所有 parent 的高度

我有这个布局

body, html {
  height: 90%;
}
#content{
  width: 100%;
  height: 100%;
}

#sidebar {
  position: relative;
  width: 200px;
  float: left;
  height: 100%;
  background-color: green;
}
#sidebar-content {
  height: 120px;
  background-color: blue;
  
}
#sidebar-footer {
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: black;
}

#main {
  position: relative;
  overflow: hidden;
  background-color: red;
}
#main-content {
   height: 750px;
}

<div id="content">
  <div id="sidebar">
    <div id="sidebar-content">
    </div>
    <div id="sidebar-footer">
    </div>
  </div>
  <div id="main">
    <div id="main-content">
    </div>
  </div>  
</div>

如果侧边栏的高度低于#main 的高度，我需要侧边栏占据所有可用高度。将侧边栏位置设置为绝对位置可以解决此问题，但会增加更多错误，是否有解决方案让相对定位的子项获取所有父项的高度而不以像素为单位指定父项的高度？

正如您在 fiddle 中看到的那样，如果#main 超出侧边栏的宽度，则侧边栏会更短，但它需要填满所有高度。

最佳答案

CSS Flexbox 确实解决了您的问题，如果您不必支持旧版浏览器，它就是完美的答案。

基本上，只需将 display: flex 添加到容器中即可解决此问题。

浏览器以多种方式支持 flexbox，确保检查该 Pen 的编译 CSS 以获取所有浏览器前缀等。

Link to CodePen

关于javascript - 如何让一个相对定位的 child 获得所有 parent 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30297909/