css - 如何使用css根据父div设置子类高度

我有三堂课

 .wrapper
 {
    width: 100%;
    float:left;
    min-height: calc(100% - 80px );
    background-color: #2d3e50;
 }
 .menu
 {
    width:7%;
    float: left;
    background-color: #2d3e50;
    height: 100%;
 }
 .content
 {
    float: left;
    padding: 20px 5px 20px 1%;
    width:93% ;
    background-color: #ffffff;
    height: 100%;
 }

 <div class="wrapper">
    <div class="menu"></div>
    <div class="content"></div>
 </div>

“包装器”的高度根据计算是完美的，但我也希望所有浏览器“ safari”，“ chrome”中“菜单”和“内容”类的高度为100％根据“包装器”类。但无法正常工作，请为所有浏览器建议我css，问题是作为图片放入此处的！[在此处输入图片说明] [1]

最佳答案

您可以使用display: table和display: table-cell尝试。

这是demo

的CSS

* {margin: 0}
html, body {height: 100%}
.wrapper
 {
    display: table;
    height: calc(100% - 80px );
    background-color: #2d3e50;
   width: 100%
 }
 .menu
 {
    display: table-cell;
    width:7%;
    background-color: #2d3e50;
    height: 100%;
 }
 .content
 {
    display: table-cell;
    padding: 20px 0.5%;
    width:92% ;
    background-color: #ffffff;
    height: 100%;
 }

关于css - 如何使用css根据父div设置子类高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24858954/