css height does not grow up

Question

I have a web page that is divided into header, page and footer.

The problem is that I made the page height :auto;. But it does not work and I need the page to automatically grow up.

This is what I have in the CSS:

/* Page */

#page-wrapper {
    overflow: auto;
    height: auto;
    text-align: center;
}

#page {
    overflow: auto;
    width: 1120px;
    margin: 0px auto;
    padding: 50px 40px;
    color: #8F8F8F;
    min-height:700px;
    height:auto;

}

And HTML:

<body>
<div id="banner">
  <div class="img-border">
    <div id="header-wrapper">
      <div id="header">      
        <div id="logo">
        </div>
       </div>
      </div>
     </div> 
    </div>
<div id="wrapper">
  <div id="page-wrapper">
    <div id="page">
      <div id="wide-content">
      </div>
    </div>
  </div>
</div>

Please post *all* relevant code and preferably a [jsFiddle](http://jsfiddle.net) — Adrift, May 10 '13 at 22:45
I don't understand what's the question and what's the intended behavior. — kapa, May 10 '13 at 22:46

score 2 · Answer 1 · answered May 10 '13 at 23:11

2

It is very unclear what it is that you want.

In your first line you say you want a footer, but your HTML and CSS don't show any footers.

If you want a footer which sticks to the bottom of the page, have a look at the CSS Sticky Footer.

answered May 10 '13 at 23:11

Mathijs Flietstra

12,900
3
38
67

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

You shouldn't need the height in there at all... a div will grow or shrink with the amount of content inside of it. Try removing height: auto; completely.

If though you mean that you want to make the content section 100% of the page height even when there isn't enough content, this should help Make div 100% height of browser window

edited May 23 '17 at 12:03

Community

1
1

answered May 10 '13 at 22:53

Mattt

1,780
14
15

Just updated the answer... I'm guessing you want it to fill the screen is the reason for the auto height? Again, a div should always stretch to the height of its content. So we may need a bit more than "it did not work" – Mattt May 10 '13 at 23:01
i mean it pass out the div page and the content of the page go to the footer – user2360853 May 10 '13 at 23:03

score 0 · Answer 3 · answered May 10 '13 at 23:09

Do you mean you want the footer of your page at the bottom and the div imbetween to take up the remaining space (it's a little difficult to determine from your wording)?

If this is you what you want, I'd suggest looking at this blog post: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

HTML summary:

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS summary:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

that is not what it happen with me sir i have a comment box so when the comment become having 10 or more lines its content go down to the footer section — user2360853, May 10 '13 at 23:14

css height does not grow up

3 Answers3