html - 如何使用总高度的 50% 来创建两个部分？

Question

我的目标是有两个部分，都包含方法栏和表格，它们使用所有可用的高度。

知道如何修改 CSS 吗？ 我已经尝试在 body 上使用 height 和 100% 以及在自定义标签上使用 50% 但没有运气.

这是一个 JSFiddle 示例，包括 Bootstrap:JSFiddle

---

代码片段:

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
html,
body {
  padding: 0;
  height: 100%;
}
/* Everything but the jumbotron gets side spacing for mobile first views */

.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}
/* Custom page header */

.header {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 10px;
}
/* Make the masthead heading the same height as the navigation */

.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}
/* Custom page footer */

.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}
.container-narrow > hr {
  margin: 30px 0;
}
/* Main marketing message and sign up button */

.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}
/* Supporting marketing content */

.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}
/* Responsive: Portrait tablets and up */

@media screen and (min-width: 768px) {
  .container {
    max-width: 730px;
  }
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}
/* customizations */

.container-fluid {
  height: 100%;
  /*
    padding-left: 0px;
    padding-right: 0px;
*/
}
.collapsed {
  display: none;
  /* hide it for small displays */
}
@media (min-width: 992px) {
  .collapsed {
    display: block;
    margin-left: -25%;
    /* same width as sidebar */
  }
}
#row-main {
  overflow-x: hidden;
  /* necessary to hide collapsed sidebar */
}
#content {
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
#sidebar {
  -webkit-transition: margin 0.3s ease;
  -moz-transition: margin 0.3s ease;
  -o-transition: margin 0.3s ease;
  transition: margin 0.3s ease;
}
.methodbar {} .sidebar-section {
  height: 40%;
  overflow: hidden;
}
.sidebar {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" id="row-main">
    <div class="col-md-3 sidebar" id="sidebar">
      <div class="row sidebar-section">
        <div class="methodbar">
          <button type="button" class="btn btn-primary">Add</button>
          <button type="button" class="btn btn-default">Edit</button>
          <button type="button" class="btn btn-default">Delete</button>
        </div>
        <table class="row table table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="row sidebar-section">
        <div class="methodbar">
          <button type="button" class="btn btn-primary">Add</button>
          <button type="button" class="btn btn-default">Edit</button>
          <button type="button" class="btn btn-default">Delete</button>
        </div>
        <table class="table table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
    <div class="col-md-9" id="content">

      <div class="jumbotron">
        <h1>'Allo, 'Allo!</h1>
        <p class="lead">
          <img src="images/yeoman.png" alt="I'm Yeoman">
          <br>Always a pleasure scaffolding your apps.</p>
        <p><a class="btn btn-lg btn-success" ng-href="#/">Splendid!<span class="glyphicon glyphicon-ok"></span></a>
        </p>
      </div>
      <div class="row marketing">
        <h4>HTML5 Boilerplate</h4>
        <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
        <h4>Angular</h4>
        <p>AngularJS is a toolset for building the framework most suited to your application development.</p>
        <h4>Karma</h4>
        <p>Spectacular Test Runner for JavaScript.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

尝试使用视口(viewport)测量单位测量高度。将侧边栏部分 css 更改为以下内容:

.sidebar-section {
    height: 50vh;
    overflow: hidden;
}

100vh 设置指定高度应占据全屏，因此我们将部分设置为 50vh，以便 2 个部分占据完整的可视空间。就像 100% 一样，它只考虑屏幕上可见的区域，无论屏幕尺寸如何。