cant get my background-color show

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

how do i make my container is 100% height and width same as body ? and 18% on nav_wrapper , 82% on reposive-page without using and px ? why my background-color wont show.

Demo

score 3 · Accepted Answer · answered Jun 17 '16 at 16:27

The html, body and container need to have a height of !00% set.

Then float the inner elements

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

score 1 · Answer 2 · answered Jun 17 '16 at 16:29

1

Your divs aren't showing up because they are empty. Place a non breaking space character in them, and then they will render. Like so:

<div>&nbsp;</div>

answered Jun 17 '16 at 16:29

Hamilton Lucas

419
2
5

score 1 · Answer 3 · answered Jun 17 '16 at 16:29

Use height: 100vh; for your .nav-wrapper and .resposive-page instead of height: 100%;. Then add a float: left; to your.nav-wrapper and .resposive-page as well.

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>

score 0 · Answer 4 · answered Jun 17 '16 at 16:35

Is this what you're referring to? https://jsfiddle.net/cb8ctkfo/3/

The height attribute isn't used well as a percentage because unlike the width property, it is based on its content. When you use percentage with a width attribute it is independent of its content, assuming it's a block element.

But this gives you a step in the right direction.

cant get my background-color show

4 Answers4