Header, Nav, Container Layout without vertical scroll bar on entire page

Question

I am having a hard time with CSS. I'm trying to create a Header, Side Nav Bar and Content Pane. Below is what I need.

enter image description here

I have attempted to create this, but for some reason there is a scroll bar on the side making the header appear and disappear as I scroll.

The only thing that needs a scroll bar is the content pane.

Both the Nav and Content needs extend all the way to the bottom of the browser.

Here is my attempt:

        #header{
            background-color:#000000;
        } 

        #nav {
            background-color:#ff6a00;
            width: 220px;
            float:left;       
            min-height: 100% !important;         
        }

        #section {
            background-color:#808080;
            min-height: 100% !important;
            float:left;   
        }

        .scrolling-wrapper {
            width: auto;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            overflow-y: auto;
        }

Here is the HTML:

    <div class="body-wrapper">

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

        <div id="nav">
            asdasd
        </div>

        <div id="section">
            <div class="scrolling-wrapper">
                adasd
                @RenderBody()
            </div>
        </div>

    </div>

Everything needs to auto adjust, for example the header can be any height so nav and content needs to compensate for that. I hope that makes sense.

Can anyone please point me into the right direction to remove the scroll bar so that the 3 containers fits perfectly in the browser?

Thank you in advance.

Josh Beam · Answer 1 · 2015-05-11T02:04:57.857

I re-worked your entire solution, but it still gives the intended (I hope) output. See the jsfiddle.

The changes I made were (among others):

More semantic HTML5, like using section, header, and nav elements for which they are intended (I recommend html5shiv if legacy browser support is an issue).
More concise CSS (no !important declarations, more extensibility, etc.)

HTML:

<header id="banner">
    Hello world
</header>
<nav>
    <ul>
        <li><a href="#">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
    </ul>
</nav>
<header id="banner2">
    Hello again...
</header>
<section>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>

CSS:

body,
html {
    font-family: sans-serif;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: none;
}

* {
    box-sizing: border-box;
}

a {
    color: gray;
}

#banner {
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: red;
    padding: .5rem;
    height: 2rem;
}

#banner2 {
    background: orange;
    position: fixed;
    left: 20%;
    top: 2rem;
    width: 100%;
    padding: .5rem;
    height: 2rem;
    z-index: 999;
}

nav {
    position: fixed;
    height: 100vh;
    width: 20%;
    background: blue;
    margin-top: 2rem;
    padding: .5rem;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

section {
    float: right;
    width: 80%;
    padding: .5rem;
    margin-top: 4rem;
    background: green;
}

p {
    margin: 0;
    padding: 0;
}

Obviously you can make whatever style changes you want for your personal preferences and design requirements (like padding, margin, background-color, etc.)

Your spec:

spec

Before:

before

After:

after

The downside of this is that some of the elements use fixed heights. You'll have to adjust some stuff for different font sizes, and probably use media queries to make it all responsive.

Same problem still exists, there is a scroll bar on the entire page, it needs to be only on the `
` bit, so the `
` and `
` needs to stay in place. — Shane van Wyk, May 11 '15 at 00:37
Thanks for your help, and yeh while I was waiting for a response I converted it to the html 5 layout objects. much nicer to use. — Shane van Wyk, May 11 '15 at 00:40
@ShaneVanWyk, no problem. Check out the [updated jsfiddle](http://jsfiddle.net/35fvfe1o/2/) (I've also updated the answer with the new code). — Josh Beam, May 11 '15 at 00:42
Almost there, the scroll bar is still hidden under the header. A more perfect example of what it needs to looks like, is in this link. http://imgur.com/9GeHhEM — Shane van Wyk, May 11 '15 at 00:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/77468/discussion-between-shane-van-wyk-and-josh-beam). — Shane van Wyk, May 11 '15 at 00:58
-This is a very helpful post related to sizing which helps a lot in the solution to this question http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels — Shane van Wyk, May 11 '15 at 10:03

score 0 · Accepted Answer · edited May 23 '17 at 12:01

So after doing a ton of research, tutorials mixed with some trial and error, I finally managed to get the exact solution to my problem stipulated in this question.

The HTML is as follows:

<body>
    <header>
        Header
    </header>
    <div class="container">        
        <nav>
            Nav
        </nav>
        <section class="section-header-top">
            Section header top
        </section>
        <section class="section-header-bottom">
            Section header bottom
        </section>
        <section class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis ratione facilis fugiat ducimus totam laborum similique nisi repellat qui sit quisquam repellendus saepe voluptatem natus cum consequuntur. Cupiditate officia.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatum facilis doloremque tempore a perspiciatis recusandae? Sapiente quaerat voluptatum. Tenetur aliquid ut facere placeat rem minima saepe. Velit modi esse.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis ratione facilis fugiat ducimus totam laborum similique nisi repellat qui sit quisquam repellendus saepe voluptatem natus cum consequuntur. Cupiditate officia.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatum facilis doloremque tempore a perspiciatis recusandae? Sapiente quaerat voluptatum. Tenetur aliquid ut facere placeat rem minima saepe. Velit modi esse.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis ratione facilis fugiat ducimus totam laborum similique nisi repellat qui sit quisquam repellendus saepe voluptatem natus cum consequuntur. Cupiditate officia.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatum facilis doloremque tempore a perspiciatis recusandae? Sapiente quaerat voluptatum. Tenetur aliquid ut facere placeat rem minima saepe. Velit modi esse.
            </section>
        </div>
</body>

The CSS is as follows:

body,
html {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

.container {
    position: relative;
    height: calc(100% - 31px);
}

nav {                
    background: #0094ff;  
    border:1px solid black;
    position: absolute;
    left: 0px;
    width: 220px;
    height: 100%;
}

section {       
    background: #b6ff00;  
    height: 100%;
    overflow:hidden;
    margin-left: 220px;
}

section.section-header-top{
    height:55px;
    background: #ffd800; 
}

section.section-header-bottom{
    height:34px;
    background: #ff6a00; 
}

section.content{
    /* The 89px is the 55px + 34px from header sections */
    height: calc(100% - 89px);
    overflow-y: auto;
} 

header{
    background:blue;
    height:31px;    
    border:1px solid black;
}

The code to this solution can be found here: Solution

I have learnt that you can subtract a % from a px in css which makes things a lot easier, I will reference this post to explain how that works:

Header, Nav, Container Layout without vertical scroll bar on entire page

2 Answers2