Bootstrap 3.3.7布局问题求助：侧边栏等高与Footer固定底部

Hey Andy, let's fix those two key layout problems you're dealing with in Bootstrap 3.3.7:

1. Make Sidebar and Content Area Equal Height #

Bootstrap 3 doesn't include native flexbox support out of the box, but we have two reliable approaches to get equal-height columns:

Approach 1: Table-Based Layout (Great for Older Browser Support) #

This method mimics table behavior to force columns to match height:

.equal-height-row {
  display: table;
  width: 100%;
  table-layout: fixed; /* Ensures consistent column width distribution */
}

.equal-height-col {
  display: table-cell;
  float: none; /* Override Bootstrap's default column float */
}

Apply these classes to your row and columns in the HTML:

<div class="row equal-height-row">
  <!-- Red-bordered sidebar -->
  <div class="col-md-3 equal-height-col" style="border: 1px solid red;">
    <!-- Your sidebar navigation content here -->
  </div>
  <!-- Blue-bordered content area -->
  <div class="col-md-9 equal-height-col" style="border: 1px solid blue;">
    <!-- Your main page content here -->
  </div>
</div>

Approach 2: Flexbox Layout (Cleaner for Modern Browsers) #

If you don't need to support very old browsers, flexbox is a more modern solution:

.flex-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.flex-col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

Update your HTML structure to use these classes:

<div class="row flex-row">
  <div class="col-md-3 flex-col" style="border: 1px solid red;">
    <!-- Sidebar content -->
  </div>
  <div class="col-md-9 flex-col" style="border: 1px solid blue;">
    <!-- Main content -->
  </div>
</div>

2. Fix Footer to Browser Window Bottom #

You have two options here depending on whether you want the footer to stay fixed during scroll or stick to the bottom only when content is short:

Method 1: Fixed Footer (Stays Visible While Scrolling) #

Use Bootstrap's built-in navbar-fixed-bottom class for a persistent footer:

<footer class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <p class="navbar-text">Your footer content goes here</p>
  </div>
</footer>

Important: Add padding to the bottom of your body to prevent content from being hidden under the footer:

body {
  padding-bottom: 60px; /* Match the height of your footer */
}

Method 2: Sticky Footer (Stays at Bottom When Content is Short) #

If you want the footer to stick to the viewport bottom only when content doesn't fill the screen, use this flexbox setup:

html, body {
  height: 100%;
  margin: 0;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1; /* Pushes footer to the bottom */
}

footer {
  background-color: #f8f8f8;
  padding: 15px;
}

Structure your HTML like this:

<div class="page-wrapper">
  <!-- Your header, sidebar, and main content -->
  <div class="main-content">
    <div class="row flex-row">
      <!-- Equal-height sidebar and content columns -->
    </div>
  </div>
  <footer>
    Your footer content
  </footer>
</div>

Feel free to share your remaining unstated requirements, and we can refine the solution further!

内容的提问来源于stack exchange，提问作者Andy