每个屏幕尺寸的最大高度 - 自举

Question

我想要一个全屏页面没有全局滚动。背景颜色应始终为屏幕高度的100％。

如果列的内容太大（如屏幕截图中的绿色列），则列本身应具有垂直滚动条。

未滚动：

滚动：

我的HTML代码：

<div class="container-fluit">
<div class="row">
    <div class="col-lg-12">
    </br>
    </div>
</div>
    <div class="row">
        <div class=" orange col-lg-4 ">
            so much content here
        </div>

        <div class="col-lg-8">
            so much content here
        </div>
    </div>

我的CSS代码：

.col-lg-4 {
    background:green;
}
.col-lg-12 {
    background:blue;
}
.col-lg-8 {
    background: orange;
}

Answer 1

你可以尝试给身体一个100vh的高度。与overflow-y: hidden;结合使用会删除滚动条。

看看这个Fiddle

Answer 2

要激活内部div的scrollbar处的y-axis，您需要设置overflow-y:scroll。但只有当您的内部内容overflows分配了height时，它才会激活。并hide body scrollbar使用overflow-y作为隐藏的overflow-y:hidden。

body{
  overflow-y:hidden;
  margin:0;
}
.col-lg-12 {
    background:blue;
}
.col-lg-4 {
    background:green;
    float:left;
    width:50%;
    height:100vh;
    overflow-y:scroll;
}
.col-lg-8 {
    background: orange;
    float:left;
    width:50%;
    height:100vh;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
<div class="container-fluid">

<div class="row">
     <div class="col-lg-12">
       <br>
     </div>
</div>

<div class="row">
   <div class = "col-lg-4">
    so much content here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in porta nibh. Cras efficitur efficitur urna non ultricies. Fusce tempus pharetra ex, non efficitur orci tempus ac. Morbi lobortis mi ut neque faucibus bibendum. Sed elit orci, aliquam sed arcu sit amet, placerat fringilla ante. Praesent vel tellus quam. Aliquam et nisl vel nisi dapibus dignissim id sed odio. Pellentesque consequat dapibus nisi aliquam tempor. Proin viverra dolor id nibh tristique, at ullamcorper diam porttitor. Duis viverra dapibus viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis commodo neque ac eros suscipit consectetur. Quisque nisi arcu, ullamcorper tincidunt vestibulum eu, sollicitudin eu leo.

Nunc sollicitudin consectetur suscipit. Suspendisse vestibulum a nulla dapibus sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean semper risus quis venenatis elementum. Vestibulum fringilla ipsum id sem luctus pretium. Nunc consequat ornare auctor. Vivamus et ex et mi pellentesque tincidunt fringilla eu arcu. Mauris porttitor volutpat mi. Proin nec ornare sapien. Ut mattis porttitor elementum.

Sed in sapien dapibus, ullamcorper augue nec, volutpat dui. Integer sit amet gravida lacus, eu laoreet arcu. Praesent urna lacus, tristique in diam quis, fermentum rutrum augue. Sed gravida risus vel leo egestas finibus. Ut interdum leo vitae dolor malesuada, quis ullamcorper quam vulputate. Fusce vitae consectetur quam, ut ullamcorper leo. Nullam malesuada dapibus pulvinar. Duis pretium purus at eleifend pharetra.

Curabitur faucibus fermentum neque at tempus. Nam ut consectetur odio. Vivamus risus lectus, suscipit vitae maximus eget, pellentesque interdum purus. Aliquam a eleifend dui. Etiam congue leo a mauris efficitur mollis. Nulla convallis posuere nisl. Morbi pretium ornare enim, ac tristique lacus interdum ullamcorper. Aliquam blandit laoreet dui, a egestas nibh sollicitudin vitae. Vestibulum semper lectus purus, vel tincidunt felis lacinia eget.

Curabitur elit justo, malesuada non laoreet sed, maximus ac eros. Aliquam blandit mauris eget tellus luctus, sed fringilla sapien laoreet. Aliquam erat volutpat. Donec nec hendrerit tellus. Mauris nec erat quis magna pharetra hendrerit. Quisque sit amet sapien non magna blandit cursus at id ante. Fusce non elit at leo sollicitudin consectetur. In quis nibh vitae libero elementum viverra id at turpis. Aliquam vulputate vestibulum orci, non dignissim lorem faucibus vel.
            
    </div>
    <div class = "col-lg-8">
            so much content here
    </div>
    </div>
 </div>