Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Html&css + Twitter Bootstrap: Full Page Layout Or Height 100% - Npx

Post a Comment
I'm trying to make following layout: +-------------------------------------------------+ | Header + search (Twitter navbar) | +------------+------------------

Solution 1:

I've found a post here on Stackoverflow and implemented your design:

http://jsfiddle.net/bKsad/25/

Here's the original post: https://stackoverflow.com/a/5768262/1368423

Is that what you're looking for?

HTML:

<divclass="container-fluid wrapper"><divclass="row-fluid columns content"><divclass="span2 article-tree">
      navigation column
    </div><divclass="span10 content-area">
      content column 
    </div></div><divclass="footer">
     footer content
  </div></div>

CSS:

html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding: 20px0;

    -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;
    overflow:auto;
    height: 100%;
}

.footer {
    background: red;
    height: 20px;
}

Solution 2:

I know it's late in the day but might help someone else!

body,html {
  height: 100%;
}

.contentarea {

 /* 
  * replace 160px with the sum of height of all other divs 
  * inc padding, margins etc 
  */min-height: calc(100% - 160px); 
}

Solution 3:

if you use Bootstrap 2.2.1 then maybe is this what you are looking for.

Sample file index.html 

<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><linkhref="Content/bootstrap.min.css"rel="stylesheet" /><linkhref="Content/Site.css"rel="stylesheet" /></head><body><menu><divclass="navbar navbar-default navbar-fixed-top"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="/">Application name</a></div><divclass="navbar-collapse collapse"><ulclass="nav navbar-nav"><li><ahref="/">Home</a></li><li><ahref="/Home/About">About</a></li><li><ahref="/Home/Contact">Contact</a></li></ul><ulclass="nav navbar-nav navbar-right"><li><ahref="/Account/Register"id="registerLink">Register</a></li><li><ahref="/Account/Login"id="loginLink">Log in</a></li></ul></div></div></div></menu><nav><divclass="col-md-2"><ahref="#"class="btn btn-block btn-info">Some Menu</a><ahref="#"class="btn btn-block btn-info">Some Menu</a><ahref="#"class="btn btn-block btn-info">Some Menu</a><ahref="#"class="btn btn-block btn-info">Some Menu</a></div></nav><content><divclass="col-md-10"><h2>About.</h2><h3>Your application description page.</h3><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p><hr /></div></content><footer><divclass="navbar navbar-default navbar-fixed-bottom"><divclass="container"style="font-size: .8em"><pclass="navbar-text">&copy; Some info
                </p></div></div></footer></body></html>
File Content/Site.css
body {
    padding-bottom: 70px;
    padding-top: 70px;
}

Solution 4:

Is this what you are looking for? Here is a fiddle demo.

The layout is based on percentage, colors are for clarity. If the content column overflows, a scrollbar should appear.

body, html, .container-fluid {
  height: 100%;
}

.navbar {
  width:100%;
  background:yellow;
}

.article-tree {
  height:100%;
  width: 25%;
  float:left;
  background: pink;
}

.content-area {
  overflow: auto;
  height: 100%;
  background:orange;
}

.footer {
   background: red;
   width:100%;
   height: 20px;
}

Post a Comment for "Html&css + Twitter Bootstrap: Full Page Layout Or Height 100% - Npx"