Geek Answers Handbook

Fixed sidebar with 100% height in CSS

I am making a fixed sidebar, which I have allowed here, in a stack overflow , so now I have a fixed line with this code:

<div id="main" style="width:100%;background:red;">
    <div id="sidemenu" style="float:left;height:200px;background:#000;">
        menu<br />
        menu<br />
        menu<br />
        menu<br />
        menu<br />
        menu<br />
    </div>
    <div id="content" style="height:200px;overflow-y:scroll;background:silver;">
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
    </div>
</div>

It has a height of 200 pixels (just to see how it works), but the sidebar that I need should have a height of 100% all the time. I saw various posts here on stackoverflow that say faux columns are an option: http://www.alistapart.com/articles/fauxcolumns/ . But inside mine <div id="sidebar">I will have, in some cases, two more DIVs: #menu and #submenu, so the width will change.

What can I do? I don't need support for older browsers: IE9, the latest Chrome and the latest Firefox are fine.

+5
3

border-left , ems, sidemenu. , div ( , ):

<body style="border-left: 10em solid #666;">

<div id="main" style="background:red;">
    <div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;">
        menu<br />
        menu<br />
        menu<br />
        very long menu item<br />
        menu<br />
        menu<br />
    </div>
    <div id="content" style="height:400px;background:silver;">
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
    </div>
</div>

</body>

( ) ( , ems, ​​ , ) y:

<div id="main" style="background: url(pattern_157.gif) repeat-y;">
    <div id="sidemenu" style="float:left;width:200px;background: transparent;">
        menu<br />
        menu<br />
        menu<br />
        very long menu item<br />
        menu<br />
        menu<br />
    </div>
    <div id="content" style="height:600px;background:transparent;">
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
    </div>
</div>
+1

, - ? , x, y?

+1

Here is another idea for this, using fixed positioning and 100% height. I also posted enough breaks to show how the content would scroll, but the sidebar and its contents would remain where they were.

<body style="margin:0;">
    <div id="main">
        <div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;">
            menu<br />
            menu<br />
            menu<br />
            very long menu item<br />
            menu<br />
            menu<br />
        </div>
        <div id="content" style="background:transparent; float:left; margin:0 0 0 220px;">
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
        </div>
    </div>
</body>
+1
source

More articles:


All Articles