Как я могу растянуть высоту, используя каркас GetSkeleton? - PullRequest
Новая
       14

Как я могу растянуть высоту, используя каркас GetSkeleton?

0 голосов
/ 09 июля 2019

Я использую фреймворк GetSkeleton CSS для создания своего веб-сайта, и я разбил его на 3 раздела. У меня есть заголовок, который содержит мою навигацию и логотип. Затем у меня есть основное содержание, которое разделено на 2, так как Skeleton использует столбцы, у меня есть боковая панель, которая состоит из двух столбцов, а мой основной раздел состоит из десяти столбцов. Как я могу растянуть мою боковую панель и основную часть до 100% высоты? Я не хочу никаких нижних колонтитулов или чего-то в этом роде, просто высота 100% от этих разделов?

Пример сайта

Выше приведен снимок экрана с моим веб-сайтом, поэтому вы можете видеть, что я хочу, чтобы красный и синий тянулись прямо до нижней части веб-сайта.

Это фреймворк, который я использую: 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>

1 Ответ

0 голосов
/ 09 июля 2019

Я думаю, что это будет работать нормально 

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