Twitter Bootstrap - making height of html, body and container 100% adds a vertical scrollbar, even with overflow: auto;

SilentDev
June 6, 2015
156 views
3 votes
3 Answers

EDIT: Fiddle does not seem to be loading Twitter Bootstrap properly so I suggest you copy paste my HTML and CSS code into a blank .html file on your desktop and troubleshoot with that file. Please remember to properly include Twitter Bootstrap 3 (the CDN is in my HTML code below) because the issue only appears when Bootstrap is included.

Here is my fiddle / code: http://jsfiddle.net/maLog1sm/

And here is the code which is in the fiddle:

HTML:

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<div class="container-fluid headerRow">
    <div class="row headerRow">
        <div class="col-md-12 navContainer">
            <ul class="nav nav-pills nav-stacked custom-nav-pills">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
                <li><a href="#"> Portfolio</a></li>
            </ul>
        </div>

        <div class="col-md-10 bodyColumn">

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

        </div>
    </div>
</div>

CSS:

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

.bodyColumn {
    height: 100%;
    overflow: auto;
}

.headerRow {
    height: 100%;
    overflow: auto;
}
.footer {
    position: absolute;
    bottom: 0%;
}

It uses bootstrap 3. I’m wondering why the vertical scroll bar is there, and how I can remove it (on fiddle, the scrollbar appears whether or not the browser window is shrunk, but on my actual website, it only appears when the window is shrunk. By shrunk, I mean when I make the width of the browser window smaller than it’s maximized width).

Answers

- NikhilAggarwal
- June 6, 2015 at 10:35 pm
- 0 votes
0
I think the problem is with the classes and styles defined in html.

In the above case, you are having headerRow class to parent and one of its child. And another child is having bodyColumn class. Both elements having style of height as 100% tries to take the 100% of parent’s height and being overflow as auto, the parent will scroll in case of overflow.

I have tried working in your fiddle and removing headerRow from child element fixes your issue.

Login or Signup to reply.

- AndrewL64
- June 6, 2015 at 10:42 pm
- 0 votes
0
Try changing your height:100% property in bodyColumn and headerRow to min-height:100% like this:
```
.bodyColumn {
    min-height: 100%;
    overflow: auto;
}

.headerRow {
    min-height: 100%;
    overflow: auto;
}
```
Leave your body height as height:100% though. Don’t change the parent height to min-height.
Login or Signup to reply.

- divy3993
- June 6, 2015 at 10:44 pm
- 0 votes
0
Problem with your code is you that you are giving height 100% to HTML and BODY, it’s fine no issue. Also you have gave same height:100% to the 2 classes(two div) inside it, now HTML can not give 100% to both the inner div. You can mention height:auto to the class which will adjust height as per the content available.

Here Try replacing height:100% by height:auto; for class .bodyColumn, it will solve your Issue

CSS : Updated
```
.bodyColumn {
    position:absolute !important;
    bottom:0%;
    height: auto;
    overflow: auto;
}

.headerRow {
    height: 100%;
    overflow: auto;
}

.footer {
    display:block;
}
```
DEMO : Updated

Explanation: Here the first div headerRow takes the whole height(100% height) of page, now for the div bodyColumn is after the above one so it is too given height 100%, so it is forced to do so but its margin:0 starts from where the content ends(here is your navContainer div)
Login or Signup to reply.