css - Css styling layout issue

Question

I have some issues regarding the basic layout of my webpage. What I want is the following: a header, then the content of the page with a menu on the left and the content on the right, and a footer. This footer should, in the case neither the content nor the menu exceeds a page in length, be at the bottom of the page with both content divs extending up to the header. In case the content exceeds the pagelength, and thus a scrollbar is shown, the footer should be at the bottom of the content.

What I currently have is the header and two columns for the content, at equal height using this page. The footer is currently at the bottom of the page, but when the content exceeds the page length it stays there.

Here's the current code:

css:

 html, body{
    margin:0px;
    height:100%;
}
#container{
    height:100%;
    width:1024px;
    margin:auto;
}
#header{
    width:100%;
    height:100px;
    background:purple;
}
#container2{
    float:left;
    width:1024px;
    background:yellow;
    overflow:hidden;
    position:relative;
}
#container1{
    float:left;
    width:1024px;
    background:red;
    position:relative;
    right:874px;
}
#col1{
    float:left;
    width:150px;
    position:relative;
    left:874px;
    overflow:hidden;
}
#col2{
    float:left;
    width:874px;
    position:relative;
    left:874px;
    overflow:hidden;
}
#footer{
    width:1024px;
    background:purple;
    position:absolute;
    bottom:0px;
    height:30px;
}

html:

<body>
    <div id='container'>
        <div id='header'>
            This is the header.
        </div>
        <div id='container2'>
            <div id='container1'>
                <div id='col1'>
                    Menu option 1<br />
                    Menu option 2<br />
                    Menu option 3<br />
                    Menu option 4<br />
                    ...
                </div>
                <div id='col2'>
                    Content!<br />
                    Content!<br />
                    Content!<br />
                    Content!<br />
                    Content!
                </div>
            </div>
        </div>
        <div id='footer'>
            This is the footer.
        </div>
    </div>
</body>

And ofcourse, here's the fiddle: http://jsfiddle.net/gVEpx/

EDIT: to be perfectly clear, the footer should be: 1) if the content is small: at the bottom of the page (no scrollbar) 2) if the content is big: at the bottom of the content, thus you shall only see the footer when you scroll to the bottom of the page.

EDIT 2: Didn't mention quite clearly that the two columns should both follow all the way to the footer. I want to have a border on one of the columns, and that border needs to follow through the whole page, from header to footer.

EDIT 3: Here are two awesomely drawn images for clarification: and .

score 1 · Accepted Answer

Look at this fiddle.
The middle section is set to min-height: 100%, and then we use padding: 100px 0; margin: -100px 0 to give place to the header and footer. And the we use box-sizing: border-box to not altering the overall height of the page. We also use padding-bottom: 9999px; margin-bottom: -9999px to stretch the content down to the footer even when there's not enough content.
If you want to vertically center the header and footer you can set the line-height equal to the height. If the content is going to be more than one line, then you can nest another div and use display: table-cell; vertical-align: middle;:

HTML

<div id="header" class="vcenter">
    <div>
        Header
    </div>
</div>
...
<div id="footer" class="vcenter">
    <div>
        Footer
    </div>
</div>

CSS

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

score 0 · Accepted Answer

These are the resources I used to do this for a recent project:

css anchor div to foot of page http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

In summation, you set a container element that contains everything but the footer to height: 100%. Then you give the footer a height and put a margin-bottom: [footer height] on the thing. I threw a padding-bottom on the last element in the container instead of using a separate div. See http://cureholidayitis.com.

Let me know if I misunderstood the question.

score 0 · Accepted Answer

I added a conditional class for the footer element using jquery, basically merged an answer from https://stackoverflow.com/a/2146903/1804496 to work with your jsfiddle.

http://jsfiddle.net/gVEpx/7/

$(function() {
   // Check if body height is higher than window height :)
   if ($("body").height() < $(window).height()) {
      $("#footer").addClass('noOverflowFooter');
   }
});

Here is another example, but without any jQuery

http://jsfiddle.net/gVEpx/8/

// Body Height
bodyH = document.body.offsetHeight;
// Window Height
windowH = window.innerHeight;
// Footer element
footer = document.getElementById("footer");
// Check if body height is higher than window height :)
if (bodyH < windowH) {
   // add to the Class attribute of the footer element
   footer.className += " noOverflowFooter";
}

score 0 · Accepted Answer

Not sure if this is what you want? JSFIDDLE

I just modified the #container2 div to have a height relative to the #container div and assigned overflow:auto

score 0 · Accepted Answer

I think this is what you are looking for

http://jsfiddle.net/pr9XJ/1/

HTML:

<body>
        <div id='container'>
            <div id='header'>
                This is the header.
            </div>
            <div id='container2'>
                <div id='container1'>
                    <div id='col1'>
                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />
                    </div>
                    <div id='col2'>
                        Content!<br />
                        Content!
                    </div>
                </div>
            </div>
        </div>
        <div id='footer'>
            This is the footer.
        </div>
    </body>

CSS:

html, body
{
    margin: 0px;
    height: 100%;
}
#container
{
    height: auto;
    min-height: 100%;
    width: 1024px;
    margin: auto;
    overflow: auto;
}
#header
{
    width: 100%;
    height: 100px;
    background: purple;
}
#container2
{
    height: 100%;
    width: 1024px;
    background: yellow;
    overflow: auto;
}
#container1
{
    padding-bottom: 32px;
    overflow: auto;
}

#col1
{
    height: 100%;
    float: left;
    width: 150px;
    background: red;
    overflow: auto;
}
#col2
{
    height: 100%;
    float: left;
    width: 874px;
    overflow: auto;
}
#footer
{
    width: 1024px;
    background: purple;
    height: 32px;
    margin-top: -32px;
    clear: both;
    position: relative;
}

css - Css styling layout issue

5 回答 5

Related

Reference