body{
margin:0px;
padding:0px;
min-height:100%;
background-color: #FFCC00;
}
.container{
width:100%;
height:100%;
background-color:red;
}
.nav_wrapper{
width:18%;
height:100%;
background-color:cornflowerblue;
}
.resposive-page{
width:82%;
height:100%;
background-color:deeppink;
}
如何使我的容器 100% 高度和宽度与主体相同？ 和 18% 在nav_wrapper，82% 在没有使用和 px 的退缩页面上？ 为什么我的背景颜色不会显示。
演示
html、body和container需要设置高度 ！00%。
然后浮动内部元素
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
.container {
height: 100%;
}
body{
margin:0px;
padding:0px;
height: 100%;
min-height:100%;
background-color: #FFCC00;
}
.nav_wrapper{
width:18%;
height:100%;
float: left;
background-color:cornflowerblue;
}
.resposive-page{
width:82%;
height:100%;
float: left;
background-color:deeppink;
}<div class="container">
<div class="nav_wrapper"></div>
<div class="resposive-page"></div>
</div>您的div 没有显示，因为它们是空的。在其中放置一个不间断的空格字符，然后它们将呈现。这样：
<div> </div>
将height: 100vh;用于.nav-wrapper和.resposive-page而不是height: 100%;。然后在您的.nav-wrapper和.resposive-page中添加一个float: left;。
body{
margin:0px;
padding:0px;
min-height:100%;
background-color: #FFCC00;
}
.nav_wrapper{
width:18%;
height:100vh;
background-color:cornflowerblue;
float: left;
}
.resposive-page{
width:82%;
height:100vh;
background-color:deeppink;
float: left;
}<body>
<div class="container">
<div class="nav_wrapper"></div>
<div class="resposive-page"></div>
</div>
</body>这就是你所说的吗？ https://jsfiddle.net/cb8ctkfo/3/
height属性不能很好地用作百分比，因为与width属性不同，它基于其内容。当您将百分比与width属性一起使用时，它独立于其内容，假设它是一个block元素。
但这给了你朝着正确方向迈出的一步。