How to Achieve Full-Height Two-Column Layouts in Bootstrap 3?

Bootstrap 3 Two Columns Full Height Optimization

In Bootstrap 3, creating a full-height layout with two columns can be challenging. The native classes do not support this out of the box. However, we can implement it using custom CSS.

Markup:

<header>Header</header>
<div class="container">
  <div class="row">
    <div class="col-md-3 no-float">Navigation</div>
    <div class="col-md-9 no-float">Content</div>
  </div>
</div>

CSS:

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

This CSS leverages CSS tables to create full-height columns. The '.no-float' class prevents collapse of columns due to Bootstrap's float-based layout.

Additional Considerations:

• To maintain a 1:3 ratio for medium screen widths and above, use the '.col-md-3' and '.col-md-9' classes.
• If this ratio is required for all screen widths, consider removing the Bootstrap column classes to avoid improper usage.
• Smaller screens default to the regular Bootstrap column behavior with each column taking the full width.

The above is the detailed content of How to Achieve Full-Height Two-Column Layouts in Bootstrap 3?. For more information, please follow other related articles on the PHP Chinese website!