Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Fixed Sidebar, Scrollable Content

Post a Comment
I'm trying to create a webpage that will have a fixed sidebar and scrollable content. It does work if I don't have a header div. If I scroll page I have some empty space that previ

Solution 1:

You have to place your navigation div in outermost part i.e. in body(not in any other div).

I have tested this and its now working fine.

Your new code should be

<html><head><linkrel="stylesheet"href="style.css"type=" text/css" /></head><body><divid="navigation"><ul><li><ahref="#home">home</a></li><li><ahref="#news">news</a></li><li><ahref="#contact">contact</a></li><li><ahref="#about">about</a></li></ul></div><divid="page"><divid="header"></div><divid="content"><divid="abcd"></div></div></div></body></html>

And your modified css:-

#page {
    position: relative;
    width: 100%;
    height: 3000px;
    background-color: yellow;
}

#header {
    background-color: blue;
    width: 100%;
    height: 150px;
    display: block;
}

#navigation
{
    background-color: red;
    width:10%;
    height:100%;
    float:left;
    position: absolute;
    z-index:1;
}

#content {
    float: left;
    background-color: green;
    width: 90%;
    overflow: auto;
    height: 1000px;
}

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

lia {
    display: block;
    color: #000;
    padding: 8px08px16px;
    text-decoration: none;
}

In css I have changed the navigation's height to 100% and its z-index to 1.

Also you didn't close the div tag with class "page".

Reference:- w3 css sidenav

Solution 2:

Please try this:

#navigation {
    background-color: red;
    width: 10%;
    height: 3000px;
    float: left;
    position: absolute;
    z-index: 99999;
    left: 0;
    top: 0;
}

Post a Comment for "Fixed Sidebar, Scrollable Content"