0

I have two divs in my page and I would like both to have its width and height set to the width and height of the browser, so that I have to scroll down to see the second div.

How is this possible?

Eidt: I forgot to mention that I also want the content in these divs to be vertically centered.

What I did until now is taking this links first answer and put that code into another div, which takes 100% of the height.

Here is what I have at the moment:

HTML:

<body>
    <div id="first"><div class="outer"><div class="middle"><div class="inner"><h1>Title 1</h1></div></div></div></div>
    <div id="second"><div class="outer"><div class="middle"><div class="inner"><h1>DTitle 2</h1></div></div></div></div>
</body>

CSS:

.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.middle {
display: table-cell;
vertical-align: middle;
}

.inner {
margin-left: auto;
margin-right: auto;
width: 100%;
}

#first, #second {
height: 100%;
}

h1 {
text-align: center;
}
Community
  • 1
  • 1
brgr
  • 318
  • 3
  • 16
  • 2
    With a little CSS. Have you tried any? – j08691 Feb 12 '14 at 16:46
  • @j08691: The resulting window will be *twice* the height of the browser window. Do you know how to solve it? – Robert Harvey Feb 12 '14 at 16:47
  • @RobertHarvey- You mean like this http://jsfiddle.net/j08691/9QuF6/1? – j08691 Feb 12 '14 at 16:47
  • Please see the edit. I forgot to mention that I would also like to have the content inside the divs vertically centered (and if I do this it won't work anymore). – brgr Feb 12 '14 at 16:58
  • Oh well, I forgot to say that body should have a height of 100%. Well, thank you all for your fast help! – brgr Feb 12 '14 at 17:00

1 Answers1

1

You can do something like:

HTML

html, body { height:100%; }
.box { height:100%; }
.one { background:#eee; }
.two {  background:#ccc; }

CSS

<div class="box one">1</div>
<div class="box two">2</div>

JSFiddle Demo

Nick R
  • 7,704
  • 2
  • 22
  • 32
  • 1
    Thanks for the answer! I forgot to say that body/html should have a height of 100%, which fixed it for me! :) – brgr Feb 12 '14 at 17:01