无法获得我的背景色显示[重复]答案

【问题标题】：cant get my background-color show [duplicate]无法获得我的背景色显示[重复]
【发布时间】：2016-10-19 13:35:25
【问题描述】：

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% 的高度和宽度与主体相同？ nav_wrapper 上 18%，reposive-page 上 82% 不使用和 px ？为什么我的背景颜色不会显示。

Demo

【问题讨论】：

标签： css

【解决方案1】：

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>

【讨论】：

非常感谢~感谢

【解决方案2】：

您的 div 没有显示，因为它们是空的。在其中放置一个不间断的空格字符，然后它们将呈现。像这样：

<div>&nbsp;</div>

【讨论】：

【解决方案3】：

将height: 100vh; 用于您的.nav-wrapper 和.resposive-page，而不是height: 100%;。然后将float: left; 添加到您的.nav-wrapper 和.resposive-page。

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>

【讨论】：

【解决方案4】：

你指的是这个吗？ https://jsfiddle.net/cb8ctkfo/3/

height 属性不能很好地用作百分比，因为与width 属性不同，它基于其内容。当您使用带有width 属性的百分比时，它独立于其内容，假设它是一个block 元素。

但这让你朝着正确的方向迈出了一步。

【讨论】：