logo标签列表

无法显示背景颜色

css
3
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;
}

如何使我的容器与body相同的高度和宽度为100%？在nav_wrapper上为18％，在响应式页面上为82％，而不使用px单位？为什么我的背景颜色不显示。 演示
4个回答
3

需要将 html、body 和 container 的高度设置为100%。

然后浮动内部元素。

* {
  -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>

非常感谢！我很欣赏你的支持。 - darkness
1
使用height: 100vh;替换height: 100%;来设置.nav-wrapper和.resposive-page的高度。然后在.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>

1
你的div没有显示出来是因为它们是空的。在其中放置一个不间断空格字符，然后它们就会渲染。像这样：
<div>&nbsp;</div>
0

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

height属性不适合使用百分比，因为与width属性不同，它是基于其内容的。当您在width属性中使用百分比时，它独立于其内容，假设它是一个block元素。

但这会让您朝着正确的方向迈出一步。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接