html - 100% 容器内 100% 的 Div 高度？

Question

<div id="container">

   <div id="content">
   //my content
   </div>

</div>

#container{
 height:100%!important;
 min-height:700px!important;
}
#content{
 height:100%!important;
}

我有一个容器 div，里面有一个内容 div，无论我做什么，我都无法让内容 div 与容器 div 的高度相同。我错过了什么吗？

谢谢

Answer 1

只需将 min-height:inherit 添加到内容样式

#content{
 height:100%!important;
 min-height:inherit;
}

Answer 2

添加height:100%到 html 和正文

html, body{height:100%}

演示

---

您也可以将 min-height:700px （或继承）添加到子 div。我希望它能解决问题。

更新的演示

向内部 div 添加更多内容，以检查height:100%内容增加时的效果。

Answer 3

<style>
#container{
height:700px !important;
 border:1px solid red;
}
#content{
 height:100%!important;
 border:1px solid green;
}
</style>
<div id="container">
   <div id="content">
    //my content 
   </div>

</div>