使垂直条同时到达页面的顶部和底部

Question

我正在创建一个垂直条以拆分侧边栏和主要部分。

我使用了网格引导程序3：

<div class="container">
  <div class="row">
    <aside class="col-md-2 left-sidebar">
      <ul>
        <li><a href="">Javascript</a></li>
        <li><a href="">jQuery</a></li>
        <li><a href="">Bootstrap</a></li>
      </ul>
    </aside>

    <div class="col-md-10 main-section">
        ....
    </div>
<div>

css代码：

.left-sidebar {
    padding-top: 50px;
    border-right: 1px solid red;
}

我发现Bootstrap 4.1的官方文档左侧结构良好。

如何生成同时到达页面顶部和底部的垂直var？

Answer 1

Boostrap4与BS3的主要区别在于它使用的是flexbox而不是floats。使用flexbox可以使行内的列具有相等的高度。因此，您可以创建2列，并且如果主列的高度为1000px，则左列的高度也应为该高度。

查看摘要

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.main-section {
  height:200vh;
  background: blue;
}

.left-sidebar {
  border-right: 2px solid red;
  background:green;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-2 col-sm-2 col-xs-2 left-sidebar">
      <ul>
        <li><a href="">Javascript</a></li>
        <li><a href="">jQuery</a></li>
        <li><a href="">Bootstrap</a></li>
      </ul>
    </div>

    <div class="col-md-10 col-sm-10  col-xs-10 main-section">
      ....
    </div>
  </div>
</div>

如果您希望具有与BS4文档中的效果相同的效果，则左列具有屏幕的高度。您可以使用viewport个单位进行操作。而且它还有position:sticky。

请参阅下文（由于代码段位置的某些原因：粘滞不起作用，请在此处进行检查-> jsfiddle sticky ）

.row {
  display: flex;
  width: 100%;
}

.main-section {
  height:200vh;
  background: blue;
}

.left-sidebar {
  border-right: 2px solid red;
  height:100vh;
  position:sticky;
  top:0;
  background:green;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-2 col-sm-2 col-xs-2 left-sidebar">
      <ul>
        <li><a href="">Javascript</a></li>
        <li><a href="">jQuery</a></li>
        <li><a href="">Bootstrap</a></li>
      </ul>
    </div>

    <div class="col-md-10 col-sm-10  col-xs-10 main-section">
      ....
    </div>
  </div>
</div>

Answer 2

使用以下代码片段将相等高度的列添加到引导网格。

    [postback] => (postback string)
    [postback_to] => https://www.paypal.com/cgi-bin/webscr
    [postback_result] => HTTP/1.1 307 Temporary Redirect
Server: AkamaiGHost
Content-Length: 0
Location: https://www.paypal.com/cgi-bin/webscr/?IPN=true
Date: Fri, 20 Jul 2018 07:37:52 GMT
Connection: close
Set-Cookie: akavpau_ppsd=1532072872~id=e027bf488669ad4f4699d81b5c8269bb; Domain=www.paypal.com; Path=/; Secure; HttpOnly
Strict-Transport-Security: max-age=63072000


    [exception] => PayPal IPN postback failure. See paypal_unknown_ipn.log for details.
    [__pid] => 25117

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.row-eq-height > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
.left-sidebar {
  box-shadow: 1px 0 0 0 #ccc;
  background: #eee;
}