Twitter bootstrap 3 two columns full height

Question

I m trying to make two-column full-height layout with twitter bootstrap 3  It seems that twitter bootstrap 3 does not support full height layouts  What I want to do      -------------------------------------------------                          Header                           ------------ ------------------------------------                                                                                                                 Navigation            Content                                                                                                                                                                                                                                                                                                                                                             ------------ ------------------------------------    If the content grows  the nav should also grow     Height 100  for every parent doesn t work because there is the case where content is one line  position absolute seems to be the wrong way display  table and display table-cell solve the problem  but it is not elegantly   html        lt div class  container  gt         lt div class  row  gt           lt div class  col-md-3  gt  lt  div gt           lt div class  col-md-9  gt  lt  div gt         lt  div gt       lt  div gt    Is there way to make it with default twitter bootstrap 3 classes

User · Answer

After experimenting with the code provided here: Bootstrap Tutorial

Here is another alternative using latest Bootstrap v3.0.2:

Markup:

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

Additional CSS:

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

Sample JSFiddle

Hope this helps anyone interested.

User · Answer

try this       lt div class  container  gt        lt  -- Header-- gt              lt  div gt   lt  div gt    lt div class  row-fluid  gt        lt div class  span3 well  gt            lt ul class  nav nav-list  gt                lt li class  nav-header  gt Our Services lt  li gt                   lt  -- Navigation  -- gt                lt li class  active  gt  lt a href     gt Overview lt  a gt  lt  li gt                lt li gt  lt a href     gt Android Applications lt  a gt  lt  li gt                lt li class  divider  gt  lt  li gt            lt  ul gt        lt  div gt        lt div class  span7 offset1  gt         lt  -- Content -- gt                 lt  div gt    lt  div gt    Visit http   www sitepoint com building-responsive-websites-using-twitter-bootstrap   Thanks to Syed

User · Answer

This was not mentioned here with offsetting   You can use absolute to position for the left sidebar   CSS   sidebar-fixed    width  16 66666667     height  100       HTML   lt div class  row  gt     lt div class  sidebar-fixed  gt      Side Bar    lt  div gt     lt div class  col-md-10 col-md-offset-2  gt      CONTENT    lt  div gt   lt  div gt

User · Answer

Have you seen the  the bootstrap s afix  in the JAvascript s section      I think it would be the best  amp  easiest solution dude   Have a look there   http   getbootstrap com javascript  affix

User · Answer

The solution can be achieved in two ways   Using display table and display table-cell Using padding and negative margin    The classes which are used to obtain the above solution are not provided in bootstrap 3  display table and display table-cell are given but only when using tables in HTML  negative margin and padding classes are also not there   Hence we have to use custom css to achieve this   The below is the first solution  HTML code    lt div class  container  gt     lt div class  row  gt       lt div class  col-md-12  gt           lt div class  page-header  gt               lt h3 gt Page-Header lt  h3 gt           lt  div gt       lt  div gt     lt  div gt     lt div class  row tablewrapper  gt       lt div class  col-md-12 tablerowwrapper  gt           lt div class  col-md-3 sidebar pad top15  gt               lt ul class  nav nav-pills nav-stacked  gt                   lt li class  active  gt  lt a href     gt Submenuone lt  a gt  lt  li gt                   lt li gt  lt a href     gt Submenutwo lt  a gt  lt  li gt                   lt li gt  lt a href     gt Submenuthree lt  a gt  lt  li gt               lt  ul gt           lt  div gt           lt div class  col-md-9 content  gt               lt div class  col-md-12  gt                   lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                   lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                   lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                   lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                   lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                   lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt     lt  div gt    lt  div gt    the corresponding css   html body  container          height 100              tablewrapper          display table          height 100              tablerowwrapper          display table-row             sidebar  content          display table-cell          height 100           border  1px solid black          float none             pad top15          padding-top 15px          The below is the second solution  HTML code     lt div class  container  gt     lt div class  row  gt       lt div class  col-md-12  gt           lt div class  page-header  gt               lt h3 gt Page-Header lt  h3 gt           lt  div gt       lt  div gt     lt  div gt     lt div class  row ovfhidden bord bot height100p  gt       lt div class  col-md-3 sidebar pad top15  gt               lt ul class  nav nav-pills nav-stacked  gt                   lt li class  active  gt  lt a href     gt Submenuone lt  a gt  lt  li gt                   lt li gt  lt a href     gt Submenutwo lt  a gt  lt  li gt                   lt li gt  lt a href     gt Submenuthree lt  a gt  lt  li gt               lt  ul gt           lt  div gt           lt div class  col-md-9 content pad top15  gt               lt div class  col-md-12  gt                    lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt  lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                    lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt  lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                    lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt  lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                    lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt  lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                    lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt  lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt                    lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt  lt div class  col-md-12  gt                       lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s                       lt  p gt                   lt  div gt               lt  div gt           lt  div gt      lt  div gt    lt  div gt    the corresponding css   html body  container          height 100              sidebar  content            display table-cell          height 100             border  1px solid black          padding-bottom 8000px          margin-bottom -8000px             ovfhidden          overflow hidden             pad top15          padding-top 15px             bord bot          border-bottom  1px solid black

User · Answer

I thought about a subtle change  which doesn t change the default bootstrap behavior  And I can use it only when I needed it    table-container     display  table      table-container  table-row     height  100     display  table-row      table-container  table-row  table-col     display  table-cell    float  none    vertical-align  top      so I can have use it like this    lt div class  container table-container  gt     lt div class  row table-row  gt       lt div class  col-lg-4 table-col  gt       lt  div gt       lt div class  col-lg-4 table-col  gt       lt  div gt       lt div class  col-lg-4 table-col  gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

A pure CSS solution is easy enough and it works like a charm cross browser      You simply add a large padding and an equally large negative margin to the nav and content columns  then wrap their row in a class with overflow hidden  Live view Edit view   HTML     lt div class  container  gt      lt div class  row  gt       lt div class  col-xs-12 header  gt  lt h1 gt Header lt  h1 gt  lt  div gt     lt  div gt      lt div class  row col-wrap  gt        lt div class  col-md-3 col  gt         lt h1 gt Nav lt  h1 gt       lt  div gt        lt div class  col-md-9 col  gt         lt h1 gt Content lt  h1 gt       lt  div gt      lt  div gt   lt  div gt    CSS     col  margin-bottom  -99999px  padding-bottom  99999px      col-wrap  overflow  hidden         Good luck

User · Answer

Modern and very simple solution   HTML    lt div class  container  gt     lt div class  row  gt       lt div class  col-md-3  gt  lt  div gt       lt div class  col-md-9  gt  lt  div gt     lt  div gt   lt  div gt    CSS    row      display  flex

User · Answer

Edit  In Bootstrap 4  native classes can produce full-height columns  DEMO  because they changed their grid system to flexbox   Read on for Bootstrap 3   The native Bootstrap 3 0 classes don t support the layout that you describe   however  we can integrate some custom CSS which make use of css tables to achieve this   Bootply demo   Codepen  Markup    lt header gt Header lt  header gt   lt div class  container  gt       lt div class  row  gt           lt div class  col-md-3 no-float  gt Navigation lt  div gt           lt div class  col-md-9 no-float  gt Content lt  div gt       lt  div gt   lt  div gt     Relevant  CSS  html body  container       height 100      container       display table      width  100       margin-top  -50px      padding  50px 0 0 0    set left right padding according to needs       box-sizing  border-box      row       height  100       display  table-row      row  no-float     display  table-cell    float  none      The above code will achieve full-height columns  due to the custom css-table properties which we added  and with ratio 1 3  Navigation Content  for medium screen widths and above -  due to bootstrap s default classes  col-md-3 and col-md-9    NB    1  In order not to mess up bootstrap s native column classes we add another class like no-float in the markup and only set display table-cell and float none on this class  as apposed to the column classes themselves    2  If we only want to use the  css-table code for a specific break-point  say medium screen widths and above  but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query  say    media  min-width  992px       row  no-float         display  table-cell        float  none          Codepen demo  Now  for smaller screens  the columns will behave like default bootstrap columns  each getting full width    3  If the 1 3 ratio is necessary for all screen widths - then it s probably a better to remove bootstrap s col-md-  classes from the markup because that s not how they are meant to be used   Codepen demo

User · Answer

If there will be no content after the row  whole screen height is taken   the trick with using position  fixed  height  100  for  col before element may work well    x000D   x000D  header   x000D    background  green  x000D    height  50px  x000D    x000D   col-xs-3   x000D    background  pink  x000D    x000D   col-xs-3 before   x000D    background  pink  x000D    content       x000D    height  100   x000D    margin-left  -15px     compensates column s padding    x000D    position  fixed  x000D    width  inherit     bootstrap column s width    x000D    z-index  -1     puts behind content    x000D    x000D   col-xs-9   x000D    background  yellow  x000D    x000D   col-xs-9 before   x000D    background  yellow  x000D    content       x000D    height  100   x000D    margin-left  -15px     compensates column s padding    x000D    position  fixed  x000D    width  inherit     bootstrap column s width    x000D    z-index  -1     puts behind content    x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt header gt Header lt  header gt  x000D   lt div class  container-fluid  gt  x000D       lt div class  row  gt  x000D           lt div class  col-xs-3  gt Navigation lt  div gt  x000D           lt div class  col-xs-9  gt Content lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To my knowledge you can use up to 5 methods to accomplish this    Using the CSS display table table-cell properties or using actual tables  Using an absolute positioned element inside the wrapper  Using the Flexbox display property but  as of today  it still has partial support Simulate full column heights by using the faux column technique  Using the padding margin technique  See example    Bootstrap  I don t have much experience with it but I don t think they provide styles for that    row       overflow  hidden      height  100      row  col-md-3   row  col-md-9        padding  30px 3 15  99999px       float  left      margin-bottom  -99999px     row  col-md-3 p   row  col-md-9 p        margin-bottom  30px     col-md-3       background  pink      left 0      width 25     col-md-9       width  75       background  yellow

User · Answer

Ok  I ve achieved the same thing using Bootstrap 3 0  Example with the latest bootstrap  http   jsfiddle net HDNQS 1   The HTML    lt div class  header  gt      whatever  lt  div gt   lt div class  container-fluid wrapper  gt       lt div class  row  gt           lt div class  col-md-3 navigation  gt  lt  div gt           lt div class  col-md-9 content  gt  lt  div gt       lt  div gt   lt  div gt    The SCSS   html  body   wrapper       padding  0      margin  0      height  100       headerHeight  43px    navigation   content       display  table-cell      float  none      vertical-align  top      wrapper       display  table      width  100       margin-top  - headerHeight      padding-top   headerHeight      header       height   headerHeight      row       height  100       margin  0      display  table-row       amp  before   amp  after           content  none            navigation       background   4a4d4e      padding-left  0      padding-right  0

User · Answer

So it seems your best option is going with the padding-bottom countered by negative margin-bottom strategy   I made two examples  One with  lt header gt  inside  container  and another with it outside   Both versions should work properly  Note the use of the following  media query so that it removes the extra padding on smaller screens      media screen and  max-width 991px         content   padding-top 0        Other than that  those examples should fix your problem

User · Answer

try   lt div class  container  gt       lt div class  row  gt           lt div class  col-md-12  gt header section lt  div gt        lt  div gt        lt div class  row fill  gt           lt div class  col-md-4  gt Navigation lt  div gt           lt div class  col-md-8  gt Content lt  div gt        lt  div gt   lt  div gt    css for  fill class is below    fill      width 100       height 100       min-height 100       padding 10px      color  efefef      background  blue     col-md-12       background  red       col-md-4       background  yellow      height 100       min-height 100       col-md-8       background  green      height 100       min-height 100        For your reference just look into the fiddle

User · Answer

You can achieve what you want with the padding-bottom  100   margin-bottom  -100   trick  has you can see in this fiddle   I change your HTML a little bit  but you can achieve the same result with your own HTML with the following code   col-md-9       overflow  hidden      col-md-3       padding-bottom  100       margin-bottom  -100

User · Answer

Pure CSS solution  Working Fiddle  Using CSS2 1 only  Work with all browsers  IE8    without specifying any height or width   That means that if your header suddenly grows longer  or your left navigation needs to enlarge  you don t have to fix anything in your CSS   Totally responsive  simple  amp  clear and very easy to manage    lt div class  Container  gt       lt div class  Header  gt       lt  div gt       lt div class  HeightTaker  gt           lt div class  Wrapper  gt               lt div class  LeftNavigation  gt               lt  div gt               lt div class  Content  gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Explanation  The container div takes 100  height of the body  and he s divided into 2 sections  The header section will span to its needed height  and the HeightTaker will take the rest  How is it achieved  by floating an empty element along side the container with 100  height  using  before   and giving the HeightTaker an empty element at the end with the clear rule  using  after   that element cant be in the same line with the floated element  so he s pushed till the end  which is exactly the 100  of the document   With that we make the HeightTaker span the rest of the container height  without stating any specific height  margin   inside that HeightTaker we build a normal floated layout  to achieve the column like display  with a minor change   we have a Wrapper element  that is needed for the 100  height to work   Update  Here s the Demo with Bootstrap classes   I just added one div to your layout

User · Answer

I wrote a simple CSS compatible with Bootstrap to create full width and height tables   Fiddle   https   jsfiddle net uasbfc5e 4   The principle is     add the  tablefull  on a main DIV   then implicitly  the DIV below will create rows   and then DIV below the rows will be cells   You can use the class  tableheader  for headers or similar   The HTML     lt div class  tablefull  gt       lt div class  tableheader  gt           lt div class  col-xs-4  gt Header A lt  div gt           lt div class  col-xs-4  gt B lt  div gt           lt div class  col-xs-4  gt C lt  div gt       lt  div gt       lt div gt           lt div class  col-xs-6  gt Content 50  width auto height lt  div gt           lt div class  col-xs-6  gt Hello World lt  div gt       lt  div gt       lt div gt           lt div class  col-xs-9  gt Content 70  width auto height lt  div gt           lt div class  col-xs-3  gt Merry Halloween lt  div gt       lt  div gt   lt  div gt    The CSS   div tablefull       display  table      table-layout  fixed      width  100       height  100      div tablefull gt div tableheader  div tablefull gt div tableheader gt div      height  0      div tablefull gt div       display  table-row     div tablefull gt div gt div       display  table-cell      height  100       padding  0

User · Answer

Try this   lt div class  row row-offcanvas row-offcanvas-right  gt   lt div class  col-xs-6 col-sm-3 sidebar-offcanvas  id  sidebar  role  navigation  gt Nav     Content lt  div gt   lt div class  col-xs-12 col-sm-9  gt Content goes here lt  div gt   lt  div gt    This uses Bootstrap 3 so no need for extra CSS etc

User · Answer

there s a much easier way of doing this if all you re concerned about is laying down the colour   Put this either first or last in your body tag   lt div id  nfc  class  col col-md-2  gt  lt  div gt    and this in your css   nfc    background  red    top  0    left  0    bottom  0    position  fixed    z-index  -99      you re just creating a shape  pinning it behind the page and stretching it to full height   By making use of the existing bootstrap classes  you ll get the right width and it ll stay responsive   There are some limitations with this method ofc  but if it s for the page s root structure  it s the best answer

[html] Twitter bootstrap 3 two columns full height

Examples related to html

Examples related to css

Examples related to twitter-bootstrap