1

I'm trying to make two-column full-height layout with fixed sidebar width. To do this I'm using display: table; display: table-cell; method . Here is my code so far:

Html:

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="navbar-header"> 
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

<div class="page-wrap">
    <div class="container">    
        <div class="page-sidebar">
            <ul>
                <li><a href="#">there'll be navigation</a></li>
            </ul>
        </div>
        <div class="page-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus non?</p>
        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
}

.navbar {
    margin: 0;
}

.page-wrap {
    height: 100%;
}

.page-wrap > .container {
    display: table;
    table-layout: fixed; 
    height: 100%;
}

.page-sidebar {
    display: table-cell;
    vertical-align: top;
    width: 200px;
    height: 100%;
    background-color: #ececec;
}

.page-sidebar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.page-content {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    height: 100%;
}

jsfiddle

All seems works fine, but is one thing. Although, there is almost no content, there is extra space on the bottom of page, which make scrollbar is visible. What causes it, and how is best way to deal with it? Thanks a lot.

Indy
  • 4,838
  • 7
  • 24
  • 35

5 Answers5

4

better to make .page-wrap class height auto ex:

.page-wrap{
   height:auto
}
Prakash R
  • 409
  • 2
  • 14
  • http://jsfiddle.net/4txrf/2/ But I want to have sidebar and content 100% height down to the bottom of page. If I set height to auto like you said, it won't work for me. – Indy Jan 14 '14 at 13:10
  • 1
    With more content in div it's height will also increase,if you want to extend it to bottom without scroll bar or extra space and with no content, make body height:auto and decrease container height,may be to 82% – Prakash R Jan 14 '14 at 13:40
1

Sorry meant to post this as an answer. This should sort it for you.

Body height 100% displaying vertical scrollbar

Community
  • 1
  • 1
Samp
  • 385
  • 3
  • 4
  • 14
0

remove height: 100%; from html , body then scroll bar will be not visible.

Shn
  • 368
  • 2
  • 10
0

The problem is caused by the implicit margin of ul

If you add 

ul {    
    margin: 0 !important;
}

then it will disappear: Running Demo

To deal with this kind of things, it would be better to reset HTML to the default behaviours everywhere with a CSS Reset, like described in this answer.

Community
  • 1
  • 1
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
0

Ok, eventually setting padding-bottom: 51px (navbar height + 1px bottom border) for body do the trick, works like a charm :)

Indy
  • 4,838
  • 7
  • 24
  • 35