可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've found a lot of discussions and questions littered around the internet pertaining to this question, however, none of them seem to match my case and solutions are highly specific to a certain situation.

I have a header element with a height of 100px at the top of the page. I have a div#sidebar element floated left with a width of 250px, and finally a div#main element also floated left.

The height of html, body, and div#sidebar is 100%.

My goal is to get div#sidebar to extend all the way down to the bottom of the page regardless of browser size or content size. Obviously, if the content is longer than the viewable page height it should act normally and push past the end of the page, introducing scroll bars.

However, as it stands now, it seems the page height has been calculated as 100% + 100px, introducing scrollbars even though there is no content that would push div#sidebar down. So far I have found no solutions that work, or perhaps I have missed it or messed a solution up; regardless, I've been at this for well over an hour and I'm about to rip my hair out.

Is there a non-JavaScript method of getting this to work properly to stop the header's height being added to 100%?

Here is my HTML/CSS - although I included all relevant details above, this should help.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Awesome Template!</title>
        <link href="./stylesheet.css" rel="stylesheet" />
    </head>
    <body>
        <header id="primary">
            <h1>My Awesome Template!</h1>
        </header>
        <div id="sidebar">
            <h1>Sidebar</h1>
        </div>
        <div id="main">
            <h1>Main</h1>
        </div>
    </body>
</html>

CSS:

html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

body
{
    background: #fff;
    font: 14px/1.333 sans-serif;
    color: #080000;
}

header#primary
{
    width: 100%;
    height: 100px;
    background: #313131;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
    background-image: -moz-linear-gradient(#4d4d4d, #313131);
    background-image: -o-linear-gradient(#4d4d4d, #313131);
    background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
    margin: 0px 0px 0px 20px;
    padding: 0px;
    line-height: 100px;
    color: #ffffff;
}

#sidebar
{
    float: left;
    width: 250px;
    background: #ccc;
    min-height: 100%;
}

#main
{
    float: left;
}

回答1:

You're looking for the infamous "faux-columns" technique. Here's a tutorial.

Basically, you can't do it with a simple background color, you have to use a repeating background image.

回答2:

I found that the method outlined in this article was a very simple method for solving the problem.

You need to surround your #sidebar and #main divs with another div, so your html code becomes:

...
<div id="content">
    <div id="sidebar">
        <h1>Sidebar</h1>
    </div>
    <div id="main">
        <h1>Main</h1>
    </div>
</div>
...

and then the following css will do something close to what you want:

#content {
    position: relative;
    width: 100%;
}
#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
}
#main {
    position: relative;
    margin-left: 250px;
}

(with a bit of tweaking e.g. I found that the margin of the h1 in #main seemed to be ignored ... but the margin of the h1 on #sidebar was not!).

回答3:

If you don't care about lower IE, use display: table on a parent and display: table-cellon the elements. This should fix their heights together. As for the gap, use margin-top: -100 px; padding-top: 100px;

回答4:

Not sure if you tried this, or if it will work for you (I'm new to coding), but try floating your sidebar left, float content right, both text-align to left, and use percentages for width.

#sidebar
    {
float: left;
width: 25%;
background: #ccc;
min-height: 100%;
text-align: left;
    }

#main
    {
float: right;
text-align: left;
width: 70%;
    }

If you have any other settings you will have to approach those differently but this might work.

回答5:

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

You can do that by this jquery code. Calling the main content height.

回答6:

jQuery elegantly handles this with ease so I'm not sure why you wouldn't want to use js. Most developers that have coded more than a couple sites have spent considerable time searching for the magic answer, as I have have, and nothing compares to using js.