How to create a content div that (1) stretches to the bottom of viewport and (2) has a 20px margin?

Question

What I am trying to create:

+--------------+
|  20px margin |
|  +--------+  |
|  |        |  |
|  |  Faux  |  |
|  |        |  |
|  +--------+  |
|              |
+--------------+

The outer square is the browser viewport. I need to create a webpage that stretches to the bottom even if there is no content, but the page should be surrounded by a 20px margin:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style>
      * { margin: 0; padding: 0; }

      html, body { height: 100%; background: #ccc; }
      body { margin: 20px; }

      #wrapper { width: 100%; background: #fff; min-height: 100%; }
      #header  { height: 80px; }
      #faux    { height: 100%; }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">Header</div>
      <div id="faux">Faux</div>
    </div>
  </body>
</html>

However, this code gives me a vertical scrollbar. This is probably due to IE 10 calculating the height as 100% + 20px but I need it to be 100% - 20px, so that there is no scrollbar is the content of the page does not exceed the browser viewport. I have tried a negative margin of 20px on #wrapper but this did not work.

How can I get rid of the vertical scrollbar?

BTW: I am indifferent of the way the page is built at this stage. #header is now outside of #faux but if it makes more sense to place it inside #faux (or if it necessary for the design to work) then please rearrange the divs :-)

Any help is greatly appreciated!

score 2 · Answer 1 · edited May 23 '17 at 12:05

2

body { padding: 20px; }

The body scretches to your whole screen and margin's are outside the borders so they will scretch it with 20 pixels on each side. You want a 'internal' difference so you use padding. :)

Edit: On the search for this I found this: CSS 100% height with padding/margin, this could be your solution too?

edited May 23 '17 at 12:05

Community

1
1

answered Nov 27 '13 at 10:33

MikaldL

159
1
2
15

Good call - but a 100% height body with padding will still give a vertical scrollbar, it will also give a horizontal one due to width being 100%. The horizontal could be solved by not adding a width to the div, since divs stretch to maximum-capable width by default. – SidOfc Nov 27 '13 at 11:46
Yes true, I forgot that having padding on a element still stretch out to have the needed space inside it. – MikaldL Nov 27 '13 at 13:11

André Junges · Accepted Answer · 2013-11-27T10:44:01.180

2

To avoid the vertical scroll you can use padding instead of margin. Just replace margin: 20px for padding: 20px and add a box-sizing: border-box

body { padding: 20px; box-sizing: border-box; }

if u don't know whats box-sizing does, take a look here http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

The height 100% wouldn't work in this case, to do it u'll need some javascript. If u are using jquery this line is enough

$("#faux").height($("#wrapper").height() - 80);

You can see it working here

edited Nov 27 '13 at 10:44

answered Nov 27 '13 at 10:34

André Junges

5,297
3
34
48

Thanks for your reply, but your solution does not work for me. I get confused now. Shouldn't the `#wrapper` be `height() - 80`? So `$("#wrapper").height($("body").height() - 80);`? This however, also does not work. Your insight please :-) – Pr0no Nov 27 '13 at 12:54
The #header div is inside the #wrapper, so #wrapper can get a 100% height.. Once #header has 80px, u need to calc to #faux get the rest. Did this answer make it clear? – André Junges Nov 27 '13 at 12:59
I'm sure it's me but could I ask you to show me a working sample with only 1 div? So like it says in the opening post: 1 div (called #faux or whatever) which is as wide as the viewport (minus 20px margin left and right) and at least as high as the viewport (with 20px margin above and under) with no scrollbar (except when the content in #faux would force the #faux div to be so long that a vertical scrollbar is needed). I think I'm misunderstanding something here, so throwing out as much as possible is probably the best here :-) Sorry to bother you. – Pr0no Nov 27 '13 at 13:09
From what i understand u want to take #header out, here it's an example http://jsfiddle.net/73Azp/1/ In this case u can set #faux height to 100%, but it wont work because, unless u have a parent with a definition height, for example if #wrapper has height: 600px, the height'll behave as auto – André Junges Nov 27 '13 at 13:17

score 1 · Answer 3 · answered Nov 27 '13 at 10:33

1

First, your header should be percentage because your faux is in percent. Otherwise, achieving 100% would be difficult.

Second, you need to specify overflow: hidden; to your body.

body { padding: 20px; overflow: hidden; }
#header  { height: 20%; }
#faux    { height: 80%; }

answered Nov 27 '13 at 10:33

Abhitalks

27,721
5
58
81

Thanks for your reply, but unfortunately this does not solve the problem. – Pr0no Nov 27 '13 at 12:12

How to create a content div that (1) stretches to the bottom of viewport and (2) has a 20px margin?

3 Answers3