Force Sidebar Height 100% Using CSS (With a Sticky Bottom Image)

Force sidebar height 100% using CSS (with a sticky bottom image)?

UPDATE: As this answer is still getting votes both up and down, and is at the time of writing eight years old: There are probably better techniques out there now. Original answer follows below.

---

Clearly you are looking for the Faux columns technique :-)

By how the height-property is calculated, you can't set height: 100% inside something that has auto-height.

Make sidebar height 100% of the browser window

Percentage heights are relative, you want the containing element .container to stretch the full height of the viewport, so it needs a height of 100%, but 100% of what? So you also need to set it on your html and body elements. Then simply give your absolutely positioned sidebar bottom:0; to stretch it the full height.

Simply change your CSS thus:

html, body { /* ensure the available document space is the full height of the viewport */
    height:100%;
    padding:0;
    margin:0;
}
.container {
    overflow: hidden;
    position: relative;
    height:100%; /* <-- make the containing element full height */
}
.leftwrapper {
    background-color: #0b7582;
    bottom: 0;
    float: left;
    position: absolute;
    text-align: center;
    top: 0;
    width: 8%;
    bottom:0; /* <-- anchor the element to both the top and the bottom of the viewport */
}
.rightwrapper {
    float: left;
    margin-left: 8%;
    width: 92%;
}

CSS - Flex Sidebar - full height of the page - Weebly

I have edited some of your CSS code below here, first I am rewriting position absolute to fixed and min-height to the height and then add overflow scroll property, I hope your problem solved.

@media screen and (min-width: 64.0625em){
    body.nav-position-sidebar .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        padding: 40px;
        border-bottom: none;
        /* display: flex; */
        /* flex-direction: row; */
        overflow: auto;
    }
}

---

Related Topics