0

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.

Paul Rooney
  • 20,879
  • 9
  • 40
  • 61
Ramin Daqiq
  • 37
  • 1
  • 2
  • 8
  • 1
    Really? [this](http://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen) 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](https://jsfiddle.net/w4xq54ht/) – Remysc May 24 '16 at 08:43
  • 3
    Possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) – Marcus May 24 '16 at 08:45
  • @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. – Ramin Daqiq May 24 '16 at 09:07

3 Answers3

3

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.

Sebastián Palma
  • 32,692
  • 6
  • 40
  • 59
Remysc
  • 187
  • 6
  • 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 :) – Ramin Daqiq May 24 '16 at 10:12
  • Oh I think I know what you want now, is it [this](https://jsfiddle.net/01t9ndra/) ?? each div being as big as the entire screen with margins on top and bottom? if so all credit is due [here](http://stackoverflow.com/questions/22441970/using-bootstrap-how-can-i-create-multiple-fullscreen-divs-to-stack-on-one-anot) – Remysc May 24 '16 at 10:56
  • 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. – Ramin Daqiq May 24 '16 at 11:17
  • So 100% of the height taking into account margin, like [this](https://jsfiddle.net/01t9ndra/1/) then? not an elegant solution imho but a working one. – Remysc May 24 '16 at 11:34
  • It is not working with Internet Explorer 11. Any idea on how to overcome that? – MICHAEL PRABHU Apr 17 '18 at 03:58
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.

Harvey
  • 1,320
  • 3
  • 13
  • 33
1

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

Tirthraj Barot
  • 2,671
  • 2
  • 17
  • 33
  • 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 – Ramin Daqiq May 24 '16 at 10:02
  • 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. – Tirthraj Barot May 24 '16 at 10:58
  • 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. – Ramin Daqiq May 24 '16 at 11:19