如何使用总高度的50％来制作两个部分？

时间：2016-11-08 15:17:41

标签： html css angular-ui-bootstrap

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

有关如何修改CSS的任何想法？ 我已尝试在height和100%上使用body和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>

3 个答案:

答案 0 :(得分：2)

尝试使用视口测量单元测量高度。将侧边栏部分css更改为以下内容：

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

100vh设置指定高度应采用全屏，因此我们将该部分设置为50vh，以便2个部分将占用完整的可视空间。它只是100％，它只考虑屏幕上可见的区域，基于它变成的任何屏幕尺寸。

答案 1 :(得分：1)

我做了一个例子。无需使用引导程序，您可以使用vh单位（视口高度）。 height: 50vh会将高度设置为视口高度的50％（整个屏幕）。希望这有效！祝好运！

＆＃13;
＆＃13; 
#div1 {
  background-color: deepskyblue;
  height: 50vh; /*THIS IS THE IMPORTANT PART OF THE CODE*/
  width: 100%;

}
#div2 {
  background-color: deeppink;
  height: 50vh; /*THIS IS THE IMPORTANT PART OF THE CODE*/
  width: 100%;

}
＆＃13; 
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

了解flexbox。

Stack Overflow中有很多资源，其中很多都是@Michael_B编写的。

在您的特定情况下，请完成以下步骤以获得所需结果：

  • 使您的#row-main成为可以包装其内容的flex容器。这将使它的孩子成为灵活物品。
  • 制作.sidebar，现在是一个弹性项目，也是一个弹性容器，但是有列方向。
  • 使用.sidebar flex-items中的flex: 1;分发.sidebar-section flex-container中可用的空间。

代码段： 

.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 */
  display: flex;
  flex-wrap: wrap;
}
#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;
}
.sidebar-section {
  flex: 1;
  overflow: hidden;
}
.sidebar {
  display: flex;
  flex-direction: column;
  flex: 1;
}
<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>

<强> Revised jsFiddle

相关问题
最新问题