Position div entire width of viewport in Twitter Bootstrap

css, positioning, twitter-bootstrap

Solution

You can get that effect by stretching the `body` and `html` tags 100% in height and width and then defining a child div to that same width. We do that because width and height are relative, so if we define a div 100% in width/height it will only stretch so far as the `body` and `html` tag. Take a look at this example:

html, body {
    width:100%;
    height:100%;
}

body {
    padding-top:60px;
}

.wrapper {
    height: 100%;
    width: 100%;
}

.huge {
    width:100%;
    height:100%;
    background-color:#eee;
}

Demo, edit here.

Note: There is some extra height added to the body of the `.huge` div due to the `padding-top` added to the body to make way for the top navbar, if that padding is removed it will become a "true" 100% height and not 100% height + top 60px as it is now.

Problem

How do you style a div in Bootstrap to span the entire width of the viewport (without fixed positioning) within the normal 12-grid system of "rows" and "spans"? In the Bootstrap source, the `navbar-fixed-top` class achieves this effect using a fixed position and `left` and `right` attributes: ``` .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; margin-bottom: 0; } ``` However, this navbar stays in the window regardless of scrolling. What styles are necessary to achieve the same entire width of the viewport without fixed positioning?

Original source