HTML/CSS full height sidebar_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-24 15:46 出处：网络

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 situ

相关专题：css height

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: 14p开发者_运维知识库x/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;
}

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!).

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.

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;

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.

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

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

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.