如何在GetSkeleton CSS框架中实现侧边栏与主内容区100%高度？

我来帮你搞定这个全屏高度的问题——Skeleton框架本身没有预设这种拉伸到视口底部的布局，所以我们需要加一点自定义CSS配合结构调整来实现。下面是具体的解决方案：

第一步：添加自定义CSS #

先在页面头部插入这段CSS，用来搭建全屏高度的基础布局：

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

/* 让主容器占满整个视口高度 */
.full-height-container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* 让内容行占据导航栏下方的所有剩余空间 */
.flex-grow-row {
  flex-grow: 1;
  display: flex;
}

/* 让侧边栏和主内容区完全填满所在行的高度 */
.flex-grow-row .columns {
  height: 100%;
}

第二步：调整你的HTML结构 #

把原来的HTML代码按下面的方式修改，给对应容器和行添加我们定义的自定义类（尽量用类代替内联样式，后续维护更方便）：

<!-- Primary Page Layout –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container u-full-width full-height-container">
  <div style="padding: 10px;">
    <!-- Navigation Bar -->
    <div class="row">
      <div class="twelve columns">
        <?php include 'includes/navbar.php'; ?>
      </div>
    </div>
    <!-- 新增flex-grow-row类，让内容区占满剩余高度 -->
    <div class="row flex-grow-row" style="padding-top: 5%;">
      <!-- Side Bar -->
      <div class="two columns link-coloured" style="background-color: blue;">
        <h2>Customers</h2>
        <hr>
        <br /><br />
        <h5><a href="#">Live Leads</a> (3)</h5>
        <h5><a href="#">Action Required </a><span style="color: red;">(5)</span></h5>
        <h5><a href="#">Notifications </a><span style="color: orange;">(2)</span></h5>
        <h5><a href="#">New Leads </a><span style="color: green;">(11)</span></h5>
      </div>
      <!-- Main Content Section -->
      <div class="ten columns" style="background-color: red;">
        <h1>Live Leads</h1>
        <hr>
        <button class="button-primary">Add New Lead</button>
        <br /><br />
        <table>
          <tr>
            <th>Customer Name</th>
            <th>Date Added</th>
            <th>Status</th>
          </tr>
          <tr>
            <td>Name 2</td>
            <td>08/09/2019</td>
            <td><span style="color: green">Vehicle Sold</span></td>
          </tr>
          <tr>
            <td>Name 3</td>
            <td>09/07/2019</td>
            <td><span style="color: blue">Prospect</span></td>
          </tr>
          <tr>
            <td>name 4</td>
            <td>10/07/2019</td>
            <td><span style="color: red">Archived</span></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
</body>

简单说下原理 #

• 先把html和body的高度设为100%，确保它们能完全覆盖浏览器视口
• full-height-container用flex垂直布局，让内部元素可以按垂直方向分配空间
• flex-grow-row通过flex-grow:1，让这个行自动占据导航栏下方的所有剩余空间
• 最后让行内的两个columns元素高度设为100%，这样红蓝区域就会自动延伸到浏览器底部了

这样修改后，你的侧边栏和主内容区就能完美拉伸到页面底部啦。

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