Question

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％高度和宽度与身体相同？没有使用和px，在nav_wrapper上有18％，在reposive页面有82％吗？为什么我的背景颜色不会显示。

Demo

Answer 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>

Answer 2

你的div没有出现因为它们是空的。在其中放置一个非空格字符，然后它们将呈现。像这样：

<div>&nbsp;</div>

Answer 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>

Answer 4

这是你指的是什么？ https://github.com/rstacruz/nprogress

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

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

不能得到我的背景色秀

4 个答案: