How to make a DIV (SIDEBAR) extend to the end of a scrolled page?

StackOverflow https://stackoverflow.com/questions/21997564

  •  16-10-2022
  •  | 
  •  

Domanda

I'm trying to fit a sidebar to the end of the #SUBCONTAINER div. this is the HTML code:

<body>
<div id="container">
    <div id="subcontainer">
        <div id="sidebar">
            <div class="logo">
            <img src="pictures/icon.png" alt="LOGO">
            </div>
        </div>
        <div id="pagecontainer">
            <div class="page">
            <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
    </div>
    <div id="footer">
    footer
    </div>
</div>
</body>

and this is the CSS I'm using right now:

html, body {
    background-color:#ffffff;
    margin:0 0 0 0;
    height:100%;
}

#container {
    position:relative;
    width:100%;
}

#subcontainer {
    position:relative;
    clear:both;
}

#sidebar {
    width:20%;
    float:left;
    background-color:#BD4538;
    color:white;
}
    .logo {
        text-align:center;
        left:50%;
        right:50%;
        border-left:-8em;
        border-right:-8em;
    }

#pagecontainer {
    width:80%;
    float:right;
    background-color:#FFFFFF;
    color:black;
}

    .page {
        padding:1em 1em 1em 1em;
        background-color:#FFFFFF;
        color:black;
    }

#footer {
    clear:both;
    height:10em;
    width:100%;
    bottom:0;
    background-color:#B82928;
    color:white;
}

p {
    margin: 0em 0em 0em 0em;
    text-align:justify;
    text-indent:1em;
}

Unfortunatelly the SIDEBAR DIV does not extend to the end of the parent SUBCONTAINER container, so if I have a longer text in PAGECONTAINER DIV, I will see the white background of the parent BODY under the SIDEBARE DIV.

I thought of a trick: if I change the background of the container PAGECONTAINER to the bgcolor of SIDEBAR I have what I want, but I'm working on a responsive website thus SIDEBAR need to change position and to go to the top of the pabe

So, any suggestion?

È stato utile?

Soluzione

I've modified the code little bit. Normally to make a equal height column div display:table display:table-cell property used.

html, body {
    background-color:#ffffff;
    margin:0 0 0 0;
    height:100%;
}

#container {
    width:100%;

}

#subcontainer {
display:table;

}

#sidebar {
    width:20%;
    background-color:#BD4538;
    color:white;
 display:table-cell;
}
    .logo {
        text-align:center;
        border-left:-8em;
        border-right:-8em;
    }

#pagecontainer {
    width:80%;
  display:table-cell;
    background-color:#FFFFFF;
  color:black;}

Working Demo link. http://jsbin.com/mopunime/1/editenter image description here

Altri suggerimenti

Remove the "float" property from both the #sidebar div and the #pagecontainer div, and set them as display: table-cell; Also, set the #subcontainer to display:table and width:100%;. That will make sidebar and pagecontainer to fill the subcontainer div.

Check it out:

html, body {
    background-color:#ffffff;
    margin:0 0 0 0;
    height:100%;
}

#container {
    position:relative;
    width:100%;
}

#subcontainer {
    position:relative;
    display: table;
    clear:both;
    width: 100%;
}

#sidebar {
    width:20%;
    display: table-cell;
    background-color:#BD4538;
    color:white;
}
    .logo {
        text-align:center;
        left:50%;
        right:50%;
        border-left:-8em;
        border-right:-8em;
    }

#pagecontainer {
    width:80%;
    display:table-cell;
    background-color:#FFFFFF;
    color:black;
}

    .page {
        padding:1em 1em 1em 1em;
        background-color:#FFFFFF;
        color:black;
    }

#footer {
    clear:both;
    height:10em;
    width:100%;
    bottom:0;
    background-color:#B82928;
    color:white;
}

p {
    margin: 0em 0em 0em 0em;
    text-align:justify;
    text-indent:1em;
}

Here's the fiddle: http://jsfiddle.net/z56S3/

If what you want is that the DIV "Sidebar" fit (width or height) to the div "subcontainer" then do that:

#sidebar {
    width:100%;
    height: 100%;
    float:left;
    background-color:#BD4538;
    color:white;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top