HTML CSS Twitter Bootstrap full page layout or height 100 - Npx

Question

I m trying to make following layout        -------------------------------------------------            Header   search  Twitter navbar                ------------ ------------------------------------                                                                                                                 Navigation            Content column                                                                                                                                                                                                                                                                                                                                                      ------------ ------------------------------------                   Footer                                  -------------------------------------------------      Layout must take all available height  amp  width  navigation and content columns take all available space and scroll on overflow  footer should stick to bottom   HTML looks like this now    lt  DOCTYPE html gt   lt html gt     lt head gt       lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt       lt title gt Bootstrap 101 Template lt  title gt       lt  -- Bootstrap -- gt       lt link href  css bootstrap min css  rel  stylesheet  media  screen  gt       lt link href  css bootstrap-responsive min css  rel  stylesheet  media  screen  gt       lt link href  css app css  rel  stylesheet  media  screen  gt       lt script src  http   code jquery com jquery-latest js  gt  lt  script gt       lt script src  js bootstrap min js  gt  lt  script gt       lt script src  js app js  gt  lt  script gt     lt  head gt     lt body gt       lt div class  container-fluid  gt            lt div class  navbar  gt           lt  -- navbar content -- gt         lt  div gt          lt div class  row-fluid columns  gt            lt div class  span2 article-tree  gt             lt  -- navigation column -- gt           lt  div gt           lt div class  span10 content-area  gt             lt  -- content column -- gt           lt  div gt         lt  div gt          lt div class  footer  gt           lt  -- footer content -- gt         lt  div gt       lt  div gt     lt  body gt   lt  html gt    CSS     body  html   container-fluid       take all available height   height  100       article-tree     color   DCE6E5    background   2F323B      content-area     overflow  auto    height  100       explicit height to make scrolling work     columns     height  100       columns should take all height   margin-top  42px      minus header   margin-bottom  20px     minus footer     columns   div       height  100      make each column to take all available height     footer     background  red    height  20px      In theory it should work  but columns margin doesn t work as I expect  I thought it should make height   100  - magin  but it just moves the container   I ve googled and seen numerous questions on StackOverflow  All of them include JavaScript or position  absolute and manual positioning  IMHO they re more hacks than a solutions  I think there should be some simpler and more elegant and cross-browser way to solve this problem   So how do I make layout described above  Maybe Bootstrap can help me  I ve looked through documentation  but there are no mentions of cases like this

User · Answer

if you use Bootstrap 2 2 1 then maybe is this what you are looking for   Sample file index html  x000D   x000D   lt  DOCTYPE html gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D   lt head gt  x000D       lt title gt  lt  title gt  x000D       lt link href  Content bootstrap min css  rel  stylesheet    gt  x000D       lt link href  Content Site css  rel  stylesheet    gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt menu gt  x000D           lt div class  navbar navbar-default navbar-fixed-top  gt  x000D               lt div class  container  gt  x000D                   lt div class  navbar-header  gt  x000D                       lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt  x000D                           lt span class  icon-bar  gt  lt  span gt  x000D                           lt span class  icon-bar  gt  lt  span gt  x000D                           lt span class  icon-bar  gt  lt  span gt  x000D                       lt  button gt  x000D                       lt a class  navbar-brand  href     gt Application name lt  a gt  x000D                   lt  div gt  x000D                   lt div class  navbar-collapse collapse  gt  x000D                       lt ul class  nav navbar-nav  gt  x000D                           lt li gt  lt a href     gt Home lt  a gt  lt  li gt  x000D                           lt li gt  lt a href   Home About  gt About lt  a gt  lt  li gt  x000D                           lt li gt  lt a href   Home Contact  gt Contact lt  a gt  lt  li gt  x000D                       lt  ul gt  x000D                       lt ul class  nav navbar-nav navbar-right  gt  x000D                           lt li gt  lt a href   Account Register  id  registerLink  gt Register lt  a gt  lt  li gt  x000D                           lt li gt  lt a href   Account Login  id  loginLink  gt Log in lt  a gt  lt  li gt  x000D                       lt  ul gt  x000D   x000D                   lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  menu gt  x000D   x000D       lt nav gt  x000D           lt div class  col-md-2  gt  x000D               lt a href     class  btn btn-block btn-info  gt Some Menu lt  a gt  x000D               lt a href     class  btn btn-block btn-info  gt Some Menu lt  a gt  x000D               lt a href     class  btn btn-block btn-info  gt Some Menu lt  a gt  x000D               lt a href     class  btn btn-block btn-info  gt Some Menu lt  a gt  x000D           lt  div gt  x000D   x000D       lt  nav gt  x000D       lt content gt  x000D          lt div class  col-md-10  gt  x000D   x000D                  lt h2 gt About  lt  h2 gt  x000D                  lt h3 gt Your application description page  lt  h3 gt  x000D                  lt p gt Use this area to provide additional information  lt  p gt  x000D                  lt p gt Use this area to provide additional information  lt  p gt  x000D                  lt p gt Use this area to provide additional information  lt  p gt  x000D                  lt p gt Use this area to provide additional information  lt  p gt  x000D                  lt p gt Use this area to provide additional information  lt  p gt  x000D                  lt p gt Use this area to provide additional information  lt  p gt  x000D                  lt hr   gt  x000D          lt  div gt  x000D       lt  content gt  x000D   x000D       lt footer gt  x000D           lt div class  navbar navbar-default navbar-fixed-bottom  gt  x000D               lt div class  container  style  font-size   8em  gt  x000D                   lt p class  navbar-text  gt  x000D                       amp copy  Some info x000D                   lt  p gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  footer gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D   File Content Site css x000D   x000D  body   x000D      padding-bottom  70px  x000D      padding-top  70px  x000D    x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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    lt div class  container-fluid wrapper  gt      lt div class  row-fluid columns content  gt         lt div class  span2 article-tree  gt        navigation column      lt  div gt        lt div class  span10 content-area  gt        content column       lt  div gt     lt  div gt      lt div class  footer  gt       footer content    lt  div gt   lt  div gt    CSS   html  body       height  100      container-fluid       margin  0 auto      height  100       padding  20px 0       -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

[html] HTML&CSS + Twitter Bootstrap: full page layout or height 100% - Npx

Examples related to html

Examples related to css

Examples related to twitter-bootstrap