CODEWITHSUNDEEP
htmlcss
ZzozZ
ZzozZ

Reputation: 15

div height fill rest of the white space

I'm trying to make my orange div to get all of the white space in height. Im using 1920x1080 monitor. When i open bottom code in my page i have white space under red, blue and green div's. I wanna orange div to move my red, blue, green div's down and fill that white space under them.

The idea is site automatically to fill browser window without scrollbars.

I try to write 100% instead of 700px, but when my attribute is 100%, orange div disappear.

Can someone tell me why that is happening, where is my mistake, how can i prevent it.

Also is it there another way to give equal space to my red, blue and green div's? I calculate that 100% of page divided by 3 is 33.3333 in period. That's why i set my width to be 33.33% but it didn't fill page completely.

.wrapper{
    position: relative;
}
.pink{
   background-color: pink;
   height: 100px; width: 100%;
   position: relative;
}
.orange{
   background-color: orange;
   height: 700px; width: 100%;
   position: relative;
   margin: 0px 0px 0px 0px;
}


.red{
   background-color: red;
   height: 300px; width: 33.33%;
   position: relative;
    float: left;
}
.blue{
   background-color: blue;
   height: 300px; width: 33.33%;
   position: relative;
    float: left;
}
.green{
   background-color: green;
   height: 300px; width: 33.33%;
   position: relative;
    float: left;
}
<div class="wrapper">
    <div class="pink"></div>
    <div class="orange"></div>
    <div class="red"></div><div class="blue"></div><div class="green"></div>
</div>

Upvotes: 0

Views: 3039

Answers (4)

ab29007
ab29007

Reputation: 7766

Wrap orange and pink inside a separate div from last three and use display:flex; on that div.

You can make three div eualwidth by using display:flex to the parent div and flex:1 to the children divs. You don't necessarily have to use width:33.33%;

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.wrapper{
  position: relative;
  margin:0;
  padding:0;
  display:flex;
  min-height:100vh;
  flex-direction:column;
}
.pink{
   background-color: pink;
   height: 50px;
   width: 100%;
   position: relative;
  flex-shrink:0;
}
.orange{
   background-color: orange;
   height:100%;
  width: 100%;
   position: relative;
   margin: 0px 0px 0px 0px;
  flex-shrink:0;
  flex-grow:1;
}
.wrapper2{
  position: relative;
  margin:0;
  padding:0;
  flex-shrink:0;
  width:100%;
  height:100px;
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}
.red{
   background-color: red;
   height:100%;
   position: relative;
   float: left;
   flex: 1;
}
.blue{
   background-color: blue;
   height:100%;
flex: 1;   position: relative;
    float: left;
}
.green{
   background-color: green;
   height:100%;
flex: 1;   position: relative;
    float: left;
}
<div class="wrapper">
  <div class="pink"></div>
  <div class="orange"></div>
<div class="wrapper2">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
</div>
  </div>

Upvotes: 0

A.D
A.D

Reputation: 2270

Is this what you mean?

I've made use of

display: table
display: table-row
display: table-cell

The orange div will now fill the remaining height of the window.

Fiddle

EDIT: I updated the fiddle. tidied the code a bit.

Upvotes: 0

ilmk
ilmk

Reputation: 592

Give height:100% to parent div, body and html

body, html{
  height:100%;
}
.wrapper{
    position: relative;
    height:100%;
}
.orange{
   background-color: orange;
   height: 100%; width: 100%;
   position: relative;
   margin: 0px 0px 0px 0px;
}

Please check this fiddle.

Upvotes: 3

Angela Amarapala
Angela Amarapala

Reputation: 1052

Include this in your style:

body{
    margin:0;
    padding:0;
}

Upvotes: 0

Related Questions