获取Bootstrap容器至全高 [英] Get Bootstrap container to full height

问题描述

全图：

示例

OR

CSS：

  html，body {
宽度：100％; 
身高：100％; 
剩下：0; 
 top：0; 
 bottom：0; 
 margin：auto; 
 font-family：Alef; 
背景：＃767E58; 
 background-size：包含; 
 background-image：url（../ img / back1024.jpg）; 
 overflow-y：auto; 
溢出：auto; 
} 
 .container {
 height：100％; 
 width：900px; 
背景颜色：＃000; 
 / * overflow：auto; * / 
} 
  

如果缩放到110％以上，容器会变小，

我找不到为什么......

任何想法我在这里做错了吗？

试过添加：

  .container：after {
 clear：both; 
 content：; 
 display：block; 
 
  

和：

 < div style =clear：both; line-height：0;>& nbsp;< / div> 
  

建议您在这里：

SOW

两者都无效。

IT可以使用

overflow：auto; ON容器DIV

但是在那个div上产生了一个垂直滚动条，我不希望这样做。
我希望在背景图片/浏览器中拥有它。

我该如何解决这个问题？

解决方案

通过ViewportHeigth（VH）设置heigth CSS3：

这个解决方案来自CSS3的上一个规范，浏览器：

  div {
 height：100vh; 
 
 $ / code> 

VH - 相对长度，如'％'。如果你设置高达100vh，那么容器会占用浏览器窗口的全部高度。
1 vh相对于视口高度的1％。
codpen示例 https://codepen.io/AlexMovchan/pen/VrxaOz ？编辑= 1100 ;或者您可以使用JS设置完整高度：



HTML：

 < div id ='block'>< / div> 
  

JS


  document.getElementById（'block'）。style.heigth = window.innerHeight +px; 
  




The full picture:
Example
OR
CSS:

html,body {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom:0;
  margin: auto;
  font-family: "Alef";
  background: #767E58;
  background-size: contain;
  background-image: url("../img/back1024.jpg");
  overflow-y: auto;
  overflow: auto;
}
.container {
  height: 100%;
  width: 900px;
  background-color: #000;
  /* overflow: auto; */
}

If you zoom above 110% the container is smaller then full height.
I could not find out why...
Any ideas what I'm doing wrong there?
Tried adding:

.container:after{
    clear: both;
    content: "";
    display: block;
}

And:

<div style="clear: both; line-height: 0;">&nbsp;</div>

Suggested here:
SOW
Both didn't work.

IT DOES WORK WITH
overflow: auto; ON container DIV

But that yields a vertical scroll bar on that div, which I do not wish to have. I wish to have it on the background image/ browser.

How can I fix that??

解决方案

Set heigth by ViewportHeigth (VH) CSS3:

This solution from last specification of CSS3, But no works in safari browser:

div {
    height: 100vh;
}

VH - it's relative length like '%'. If you set heigth 100vh the container take full heigth of browser window. 1 vh relative to 1% of the height of the viewport. Example on codpen https://codepen.io/AlexMovchan/pen/VrxaOz?editors=1100;

Or you can set the full height by using JS:

HTML:

<div id='block'></div>

JS

document.getElementById('block').style.heigth = window.innerHeight + "px";

这篇关于获取Bootstrap容器至全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！