Yet Another HTML/CSS Layout Challenge - Full Height Sidebar with Sticky Footer

yet another HTML/CSS layout challenge - full height sidebar with sticky footer

With little content: http://jsfiddle.net/2ZhpH/41/

With lots of content: http://jsfiddle.net/2ZhpH/42/

I added position: relative to #wrapper, and then:

#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 50px;
}
#main {
    margin-left: 102px
}

(why position: relative? Just to avoid something like this: http://jsfiddle.net/2ZhpH/40/)

Getting a sidebar to appear 100% height when using faux columns and a sticky footer

I think I know what you mean - but the solution deviates from faux columns. I think you want to make the right column will always appear to fill the vertical height of the inner container.

To do this just use the background image on the <div id="outer" /> element. Like so:

#outer {
url(../images/faux-columns.png) repeat-y center top;
}

Hope that helps!

Full height content block width sticky footer

You are so close ... just need to change the value from height , what you need is to set the min-height :

.container {
     min-height: 100%;

Updated Fiddle

---

Bonus:

To keep the content all visible you can use padding on the container = to the height of your footer and header:

    .container {
        min-height: 100%;
        background:red;
        width:1280px;
        margin:0 auto;
        position: relative;

        /*Use box-sizing to include the values of the padding on the 100% min-height*/
        box-sizing:border-box;
        /*Padding for bottom and top = to the height of your elements footer-header*/
        padding: 135px 0;
    }

2nd Demo Fiddle

HTML/CSS SIdebar with header/footer and scrollable content at full height

here you are...

<style>
body,html {
height:100%;
}
.header {
height:40px;
    width:100%;
}
.footer {
height:40px;
width:100%;
    position:absolute;
    bottom:0;
}
.content {
position:absolute;
    width:100%;
top:40px;
bottom:40px;
    overflow-y:auto;
}
</style>

<div class="header">
    profile
</div>
<div class="content">
    content

</div>
<div class="footer">
    footer
</div>

http://jsfiddle.net/Ve8PL/

Scrollable sidebar with footer visible if the main content is short

You could add height:100% (h-100) to make the container and row consume full height of main which which will allow the sidebar and content to scroll as needed. It would work like this...

<div class="all">
    <div class="navbar sticky-top navbar-expand">Navbar</div>
    <div class="main">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="sidebar h-100">
                    <h3>Sidebar</h3>
                    ...
                </div>
                <div class="col h-100 overflow-auto">
                    <h3>Main</h3>
                    ...
                </div>
            </div>
        </div>
    </div>
    <div class="footer">Footer</div>
</div>

Demo

---

Related Topics