Home/ Questions/Q 9267047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T14:27:32+00:00

See the following fiddle: http://jsfiddle.net/HXzPj/6/ HTML: <!DOCTYPE html> <html> <head> <link rel=stylesheet href=http://twitter.github.com/bootstrap/assets/css/bootstrap.css />

  • 0

See the following fiddle: http://jsfiddle.net/HXzPj/6/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
    </head>
    <body>
        <div class="navbar" style="position:absolute; top:0; width:100%;">
            <div class="navbar-inner"> <a href="#" class="brand">KB</a>

                <ul class="nav">
                    <li class="active"><a href="#">Home</a>

                    </li>
                    <li><a href="#">Create page</a>

                    </li>
                </ul>
                <ul class="nav pull-right">
                    <li>
                        <p class="navbar-text">user@email.com</p>
                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Upload</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Manage</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Password</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Sign Out</a>

                    </li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row-fluid columns">
                <div class="span2 article-tree">Article-tree</div>
                <div class="span10 content-area">Content-area</div>
            </div>
            <div class="footer">footer</div>
        </div>
    </body>

</html>

And CSS:

 html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding-top: 62px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.columns {
    background-color: #C9E6FF;
    height: 100%;
}
.content-area, .article-tree {
    background: #bada55;
    height: 100%;
}
.footer {
    background: red;
    height: 20px;
}

Everything works fine when the screen width is wide enough to show all elements of the navbar. When the width is reduced, then the navbar stacks nicely but the article-tree and content-area stay in their fixed position, so are partly hidden behind the navbar.

How can I get it so that the content gets pushed below the navbar when it’s stacking? Do I have to use @media for this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Problem solved by reworking the whole mess a bit. In case anyone is ever interested in this, here is the code:

    HTML

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
    </head>
    <body>
        <div class="navbar">
            <div class="navbar-inner"> <a href="#" class="brand">KB</a>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Create page</a></li>
                </ul>
                <ul class="nav pull-right">
                    <li><p class="navbar-text">user@email.com</p></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Upload</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Manage</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Password</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Sign Out</a></li>
                </ul>
            </div>
        </div>

        <div class="container-fluid container-height">
            <div class="row-fluid full-height">
                <div class="span2 article-tree">Article-tree</div>
                <div class="span10 content-area full-height"><div id='paragraphs' data-lorem='5'></div></div>
            </div>

        </div>
        <div class="container-fluid footer">
            <div class="footer">footer</div>        
        </div>
    </body>

</html>

    CSS

    html, body {
    height: 100%;
}
.full-height {
    height: 100%;
}
.content-area {
    background: green;
    color: white;
}

.article-tree {
    background: blue;
    color: white;
}
.footer {
    background: red;
}

.container-height {
    margin: 0 auto;
    min-height: 88%;
    height: auto;    
}

    See jsfiddle: http://jsfiddle.net/pCut6/

    It can be done much better still with more responsive design etc but this should give someone an idea if they’re stuck like me and need an example.

    • 0