如何使用 GetSkeleton 框架拉伸高度答案

【问题标题】：How can I stretch the height using GetSkeleton framework如何使用 GetSkeleton 框架拉伸高度
【发布时间】：2019-11-19 02:54:53
【问题描述】：

我正在使用 GetSkeleton CSS 框架来构建我的网站，目前我将其分为 3 个部分。我有我的标题，其中包含我的导航和徽标。然后在下面，我的主要内容分为 2 个，因为 Skeleton 使用列，所以我有一个侧边栏，它是两列，我的主要部分是十列。如何将侧边栏和主要部分拉伸到 100% 高度？我不想要任何页脚或任何东西，只想要这些部分的 100% 高度？

Example of Website

以上是我的网站到目前为止的屏幕截图，因此您可以看到我希望红色和蓝色一直延伸到网站的底部。

这是我正在使用的框架：http://getskeleton.com

这是我的 HTML 代码；

<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container u-full-width">

<div style="padding: 10px;">

  <div class="row">
    <!-- Navigation Bar -->
    <div class="twelve columns">
      <?php include 'includes/navbar.php'; ?>
    </div>
  </div>

  <div class="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>

【问题讨论】：

请在class="row"上方添加<div class="container">
我已经添加了它，不知道为什么它没有显示它但现在应该显示它

标签： html css responsive-design frameworks

【解决方案1】：

我认为这会很好用

<!DOCTYPE html>
<html>
<head>
    <title>tt</title>
    <link rel="stylesheet" type="text/css" href="skeleton.css">
</head>
<body>
<div style="padding: 10px;">

<div class="row">
  <!-- Navigation Bar -->
  <div class="twelve columns">
    <?php include 'includes/navbar.php'; ?>
  </div>
</div>

<div class="row" style="padding-top: 5%; ">
  <!-- Side Bar -->
  <div class="two columns link-coloured" style="background-color: blue; height: calc(100vh - 140px)">  
    <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;height: calc(100vh - 140px)">
    <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>
</body>
</html>

【讨论】：

感谢 Venkat 的回答，但是没有用。我已经用我的更多代码更新了我的问题，这样你就可以准确地看到我在使用什么
更新我的评论对不起重播了
请检查新的你必须使用高度：calc(100vh - 100px)