Div height driving me mad

Question

i have a layout based on divs like this:

<div id="master">
 <div id="header">Header</div>
 <div id="menu">Menu</div>
 <div id="content">Content</div>
 <div id="footer">Footer</div>
</div>`

All vertical aligned.

HTML, body height is 100% same goes for master div. when i set content div to 100% it expands and gives me scroll bar.

My goal is to get content div to fill out the rest. putting footer to bottom and header & menu on top.

I cannot seem to achieve this.

any help?

Have you set the margins to zero? – j08691 Sep 08 '13 at 19:58 — j08691, Sep 08 '13 at 19:58
Hey check http://jsfiddle.net/Cj8YV/1/ – Praveen Kumar Purushothaman Sep 08 '13 at 20:17 — Praveen Kumar Purushothaman, Sep 08 '13 at 20:17

Praveen Kumar Purushothaman · Answer 1 · 2013-09-08T20:16:54.240

0

I guess it is your body's margin or padding. Try resetting them:

#master {padding-top: 0; padding-bottom: 0; overflow: auto;}

Fiddle: http://jsfiddle.net/Cj8YV/1/

edited Sep 08 '13 at 20:16

answered Sep 08 '13 at 20:00

Praveen Kumar Purushothaman

164,888
24
203
252

THey are html, body { height: 100%; margin: 0px; padding: 0px; – user2759588 Sep 08 '13 at 20:05
@user2759588 Can you please show us the full code and it would be good if you can make a fiddle. – Praveen Kumar Purushothaman Sep 08 '13 at 20:06
@user2759588 You have padding top and bottom for the `#master`. Remove that and you are good to go. And also, to control, give `overflow: hidden;`. See my updated answer. :) – Praveen Kumar Purushothaman Sep 08 '13 at 20:14
Im affraid not, you can try yourself in fiddle.Ah update ok ^^ – user2759588 Sep 08 '13 at 20:17
It makes a scrollbar within the div now :S im lost. going back to soon – user2759588 Sep 08 '13 at 20:22
@user2759588 Yes, because the content is more than the height. If you don't want a scrollbar, you may use `overflow: hidden;` – Praveen Kumar Purushothaman Sep 08 '13 at 20:24
My content isnt high, i want #indhold to fill the screen. When i set overflow:hidden; it just hiddes boxcontainer and footer – user2759588 Sep 08 '13 at 20:26

score 0 · Answer 2 · edited May 23 '17 at 10:25

You'll find many helpful answers if you search for "push footer down", for instance this: How do you get the footer to stay at the bottom of a Web page?

If your footer height is fixed, try restructuring the HTML code like so:

HTML

<html>
<head>...</head>
<body>
<div class="wrapper">
header, content and menu goes here
<div class="push"></div>
</div>
<div class="footer">footer</div>
</body>
</html>

CSS

Include the following CSS (I copied the code from the linked answer and put in some background colors, so it can be tested easily):

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    background: red; /* demo */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
.footer {
    background: blue; /* demo */
}

Div height driving me mad

2 Answers2

Fiddle: http://jsfiddle.net/Cj8YV/1/

HTML

CSS