我使用自舉.container類將屏幕上的內容居中，並將其寬度修改爲適合視口的內容。這很好，但是我現在想要將該容器包裝在一個高度爲100％的單個居中列中。我希望高度至少爲視口的100％。當內容不能在單個屏幕上修復時，它應該展開。以單孔，100％高度包裝自舉容器
我看過一般解決方案，將html和body元素的高度設置爲至少屏幕高度，但這些在Bootstrap中似乎不起作用。我懷疑它與設置爲邊框的框大小有關。
下面是HTML的例子：
<div class='my-col'>
<div class='container'>
<p>My content goes here</p>
</div>
</div
使用min-height: 100vh。
vh是一個視口單位：1 vh等於顯示器高度的1％。
我不知道這是否對你有幫助。我不能在這個小提琴中加入引導，我只是不知道該怎麼做。所以你可以在你自己的控制檯上做這個，我做了這個把戲讓我的內容達到100％的高度。
在這裏我們去：
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;
}<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>它會在屏幕下方設置絕對您的頁腳，你並不需要設置頁腳它的自我定位絕對或固定我所做的是，我伸展容器，並從頁眉和頁腳採取其餘的高度。
也許我可以說，它是這樣的
container height - (header height + footer height).
希望它會幫助你。
試試這個代碼，您的問題
body,html{
height:100%;
}
.my-col{
height:100%;
background:green;
}
.container{
height:100%;
background:gold;
}<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對還codepen看看
使用最小高度：100vh爲你的容器和爲什麼要保持容器方面？ –