html - 如何使用 GetSkeleton 框架拉伸(stretch)高度

我正在使用 GetSkeleton CSS 框架构建我的网站，目前我将其分为 3 个部分。我有我的标题，其中包含我的导航和 Logo 。然后在下面我有我的主要内容，它被分成 2 个，因为 Skeleton 使用列，我有一个侧边栏，它是两列，我的主要部分是十列。如何将侧边栏和主要部分拉伸(stretch)到 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>

最佳答案

我认为这会很好用

<!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>

关于html - 如何使用 GetSkeleton 框架拉伸(stretch)高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56954448/

html - 如何使用 GetSkeleton 框架拉伸(stretch)高度

上一篇：css - 什么有更大的优先级 : opacity or z-index in browsers?

下一篇：html - 是否可以在 ngx-pagination 中不使用省略号？