Question

我正在使用Bootstrap .container类将内容置于屏幕中心，并将其宽度固定在适合视口的位置。没关系，但我现在想把那个容器包装在一个高度为100％的单个中心列中。我希望高度至少是视口的100％。当内容无法在单个屏幕上修复时，它应该展开。

我已经研究了将html和body元素的高度设置为至少屏幕高度的一般解决方案，但这些似乎在Bootstrap中不起作用。我怀疑它与box-sizing设置为border-box有关。

以下是html的示例：

<div class='my-col'>
  <div class='container'>
    <p>My content goes here</p>
  </div>
</div

Answer 1

使用min-height: 100vh。

vh是一个视口单元：1 vh等于显示器高度的1％。

Answer 2

我不知道这是否对你有帮助。我不能在这个小提琴中放一个引导程序，我只是不知道该怎么做。那么请你在你自己的控制台上做这个，我做了这个技巧，让我的内容达到100％的高度。

我们走了：

＆＃13;

html{
margin:0;
height:100%;}
body{
display:flex;
flex-direction:column;
height:100%;
padding:0;
margin:0;
 background:yellow;
}

header{
flex:0 1 80px;
background:#ddd;
}
section#containerWrap{
flex:1 1 auto;
height:100%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
 background:#ccc;
 position:relative;
}
section#containerWrap .container{
height:100%;}
footer{
flex:0 1 40px;
  background:#999;
}

＆＃13;

<body>
<header>header is about nav and logo</header>
<section id="containerWrap">
  <div class="container">
    <p>very long content should be flexible in here</p>
    <p>very long content should be flexible in here</p>
    <p>very long content should be flexible in here</p>
  </div>
</section>
<footer>the footer, website map, and more like contact us</footer>
</body>

＆＃13;

它会将你的页脚完全设置在屏幕的底部，你不需要将它自己设置为绝对位置或固定我所做的，我伸展容器并取其余的高度从页眉和页脚。

也许我可以说这样的事情

container height - (header height + footer height).

希望它会对你有所帮助。

Answer 3

为您的问题尝试此代码

＆＃13;

body,html{
  height:100%;
}

.my-col{
  height:100%;
  background:green;
}

.container{
  height:100%;
  background:gold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css" />
<div class='my-col'>
  <div class='container'>
    <p>My content goes here</p>
  </div>
</div

＆＃13;

看看codepen也

http://codepen.io/anon/pen/jyObgP#anon-login

在单柱中包裹自举容器，100％高度

3 个答案: