Question

我有三个班级

 .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”中的“包装”类的“菜单”和“内容”类的高度为100％，“chrome”也是。但是没有正常工作请建议我使用所有浏览器的css问题放在这里作为图像！[在此输入图像描述] [1]

Answer 1

百分比高度仅适用于IE而非其他浏览器。对于其他浏览器，您的父div应具有固定的高度。

这是一个简单的解决方案，使其工作：

html,body{
  height: 100%;
}

Answer 2

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

.wrapper {
    position: relative;
}

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

并删除

float: left;

来自.menu的

这会给.menu高度100％吗？

如果是，则删除

float: left;

<。>来自.content并将其添加到.content＆＃39; CSS：

.content {
    position: relative;
}

Answer 3

所以我的最后一篇文章在w3s的tryit编辑器中运行正常。
<table class="wrapper"> <tr> <td class="menu"></td> <td class="content"></td> </tr> </table>

Answer 4

您可以使用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设置父div的子类高度

4 个答案: