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

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

  •  16-10-2022
  •  | 
  •  

سؤال

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?

هل كانت مفيدة؟

المحلول

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

نصائح أخرى

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;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top