Fixed sidebar, scrollable content

Question

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 previously was a header (i marked it with red color). I'd like my sidebar to cover the empty space after I scroll through header div.

Here's my HTML Code - how can I fix this?

<!doctype html>

<head>
    <link rel="stylesheet" href="style.css"type=" text/css"/>
</head>

<body>
    <div id="page">

        <div id="header">   
        </div>

        <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="content">
            <div id="abcd">
        </div>
    </div>
</body>

CSS

#page
{
    position:relative;
    width:100%;
    height:3000px;

    background-color:yellow;
}

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

#navigation
{

    background-color: red;
    width:10%;  
    height:3000px;
    float:left;

}

#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;
}

Answer 1

You have to place your navigation div in outermost part ie 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

Answer 2

Please try this:

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

Fixed sidebar, scrollable content

Question

2 answers

solution1
2 ACCPTED 2016-03-20 17:33:20

solution2
0 2016-03-20 17:31:56

Fixed sidebar, scrollable content

Question

2 answers

solution1 2 ACCPTED 2016-03-20 17:33:20

solution2 0 2016-03-20 17:31:56

solution1
2 ACCPTED 2016-03-20 17:33:20

solution2
0 2016-03-20 17:31:56