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>
    <link rel="stylesheet" href="style.css" type=" text/css" />
</head>

<body>
    <div id="navigation">
        <ul>
            <li><a href="#home">home</a></li>
            <li><a href="#news">news</a></li>
            <li><a href="#contact">contact</a></li>
            <li><a href="#about">about</a></li>
        </ul>
    </div>

    <div id="page">

        <div id="header">

        </div>
        <div id="content">
            <div id="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;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    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"