CSS Bootstrap 3两列全高度布局

在本文中，我们将介绍如何使用CSS和Bootstrap 3创建一个两列全高度布局。两列布局是网页设计中常见的一种布局，可以将内容分为左右两个列，每个列的高度都能够自适应页面的高度。

阅读更多：CSS 教程

什么是Bootstrap 3？

Bootstrap是一个流行的前端开发框架，它提供了一套用于构建强大、响应式网页的CSS和JavaScript组件。Bootstrap 3是Bootstrap框架的早期版本，它包含了丰富的CSS类和样式，可以帮助我们更快地构建网页布局。

如何创建两列布局？

要创建两列全高度布局，我们可以使用Bootstrap的栅格系统。栅格系统使用了12列的网格来布局页面，我们可以将页面分为几个不同的列，并将它们放置在一个包含这些列的容器内。

首先，我们需要创建一个带有主要内容的列和一个带有辅助内容的列。接下来，我们使用Bootstrap的栅格类将这两个列分配到不同的列宽中。例如，我们可以将主要内容列设置为col-md-9（占9个网格），将辅助内容列设置为col-md-3（占3个网格）。

下面是一个示例布局的代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-9 main-content">
      <!-- 主要内容 -->
    </div>
    <div class="col-md-3 sidebar">
      <!-- 辅助内容 -->
    </div>
  </div>
</div>

在这个示例中，container-fluid类用于创建一个全宽度的容器，row类用于创建一行，col-md-9类和col-md-3类分别用于设置主要内容列和辅助内容列的宽度。

如何使两列高度自适应？

要使两列的高度自适应并填充整个页面，我们可以通过一些简单的CSS样式来实现。我们可以使用CSS Flexbox布局或使用CSS表格布局来实现这个效果。

使用Flexbox布局

Flexbox布局是一种弹性盒子布局模型，可以方便地在容器中创建灵活的布局。为了使两列高度自适应，我们可以将容器的display属性设置为flex，并将align-items属性设置为stretch，这样两列的高度将会自动填充整个容器。

下面是示例代码：

.container-fluid {
  display: flex;
  align-items: stretch;
}

使用CSS表格布局

另一种方法是使用CSS表格布局来实现两列高度自适应。我们可以将容器的display属性设置为table，将行（row）的display属性设置为table-row，将列（col）的display属性设置为table-cell，这样两列的高度将会自适应容器的高度。

下面是示例代码：

.container-fluid {
  display: table;
}

.row {
  display: table-row;
}

.col-md-9, .col-md-3 {
  display: table-cell;
}

使用Flexbox布局或CSS表格布局都可以实现两列全高度布局。具体使用哪种方法取决于您的项目需求和浏览器兼容性要求。

总结

在本文中，我们介绍了如何使用CSS和Bootstrap 3创建一个两列全高度布局。我们使用Bootstrap的栅格系统将页面分为两个列，并使用Flexbox布局或CSS表格布局使两列的高度自适应。这种布局方法可以帮助我们更好地构建响应式网页布局，提升用户体验。希望本文对您有所帮助！