Make Div Element 100% Height of Browser Window Using CSS

Question

I am using bootstrap 3 to design a HTML page and right now I am facing a problem. I want my div tag container to take 100% height of the browser window but using CSS only (no javascript).

I went through lots of questions in stack overflow itself but couldn't find a solution that could help me. I don't want to use vh, as when you resize your window it wont work properly or wont show the container properly and I have 5 div tag containers and want every container to be the same size of the browser window.

p.s I don't think html or css is required as it can be answered without the code.

• Remysc: Really? this shows up as the first result if you look for "make a div take all of the screen" and it seems to work just fine
• Marcus: Possible duplicate of Make div 100% height of browser window
• Ramin Daqiq: @Remysc i have div which contains 5 more divs and i want every of those div to fit the browser window and i also have a margin of 15 px both on bottom and top.

Answer 1

Is this what you want?

html, body {
 height: 100%;
 margin: 0;
}
#thediv{
 min-height:100%;
 min-width:100%;
 background-color:red;
 display:flex;
 align-items:stretch;
 position:relative;
}
.interiordiv{
 background-color:blue;
 width:50px;
 margin:15px auto 15px auto;
}

<div id="thediv">
	<div class="interiordiv">A</div>
	<div class="interiordiv">V</div>
	<div class="interiordiv">C</div>
	<div class="interiordiv">D</div>
	<div class="interiordiv">E</div>
</div>

If not please try to make it clearer, if you don't want to post code that's ok but post a mockup image or something.

• Ramin Daqiq: thanks buddy but , i want to place those divs vertically . i want to have 5 divs and each div should occupy a single browser window and when i scroll down i should see the second div taking the same 100% width with 100% height of the browser window with those margins. thanks :)
• Remysc: Oh I think I know what you want now, is it this ?? each div being as big as the entire screen with margins on top and bottom? if so all credit is due here
• Ramin Daqiq: it doesnt fit the exact screen , it will have the margin but 100% height container will come after that taking exactly 100% height and margin size of the image will be shown down.
• Remysc: So 100% of the height taking into account margin, like this then? not an elegant solution imho but a working one.
• MICHAEL PRABHU: It is not working with Internet Explorer 11. Any idea on how to overcome that?

Answer 2

All that is required is to set the 'min-height' CSS attribute of the Div you wish to re-size:

<div style="min-height: 100%"></div>

Ensure your html & body tags have a height of 100% also.

Answer 3

Here you go.. as you said you are using bootstrap, you might override the row class and achieve this easily.

.row{
height:100%;
}
<div class="row bg-success"></div>
<div class="row bg-danger"></div>
<div class="row bg-warning"></div>
<div class="row bg-info"></div>
<div class="row bg-primary"></div>

Here are the screen sizes I tested it with.

enter image description here enter image description here THESE TWO WERE FULL SCREEN DESKTOPS

enter image description here enter image description here THESE WERE NON-FULL SCREEN BROWSER

enter image description here enter image description here THESE WERE IPHONE RESOLUTION IN PORTRAIT MODE

enter image description here enter image description here THESE WERE IPHONE RESOLUTION IN LANDSCAPE MODE

• Ramin Daqiq: what if i have a margin of 15 px for both bottom and top? and it only works when the browser is maximized, i also wants it to work however the browser is i mean maximizing shouldnt be mandatory to show that it fits the screen. Thanks
• Tirthraj Barot: I checked that out with different browser states and sizes. I even checked it out in mobile phone. It works perfect for me in all states.
• Ramin Daqiq: it works when the browser is full screen , i want it to work even if the browser isnt full screen. it should show the container in the browser window even if its not full screen.