Question

我正在使用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>

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

我如何使用GetSkeleton框架拉伸高度

1 个答案: