如何使用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>

.wrapper
{
宽度：100%；
浮动：左；
最小高度：计算（100%-80px）；
背景色：#2d3e50；
}
菜单
{
宽度：7%；
浮动：左；
背景色：#2d3e50；
身高：100%；
}
所容纳之物
{
浮动：左；
填充：20px 5px 20px 1%；
宽度：93%；
背景色：#ffffff；
身高：100%；
}

---

根据计算，“包装器”的高度是完美的，但我希望所有浏览器“safari”、“chrome”中的“菜单”和“内容”类的高度100%符合“包装器”类。但工作不正常，请建议我所有浏览器的css的问题是把这里作为图像！[在此处输入图像描述][1]

高度百分比仅在IE浏览器中有效，而在其他浏览器中无效。对于其他浏览器，您的父div应该有一个固定的高度

以下是使其工作的简单解决方案：

html,body{
  height: 100%;
}

---

将此CSS添加到.wrapper和.menu：

.wrapper {
    position: relative;
}

.menu {
    left: 0;
    position: absolute;
}

并移除

float: left;

从菜单。菜单的高度是100%吗

如果是，则拆下

float: left;

从.content并将其添加到.content的CSS：

.content {
    position: relative;
}

---

因此，这是我最后一个建议，它在w3s tryit编辑器中运行良好。

您可以使用

display:table

和

display:table cell

进行尝试

这是你的电话号码

CSS

---

已经给不工作，这是。还有Safari显示表的问题，calc（100%-80px）不工作。如果你能做到的话，就给我发一个例子，它在我这边很有效。你能告诉我你在检查哪个浏览器吗？

* {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%;
 }