私はブートストラップ.containerクラスを使用して画面上にコンテンツを配置し、ビューポートに適した幅に固定します。それは問題ありませんが、今では100％の高さを持つ単一の中心の列にそのコンテナをラップしたいと考えています。高さをビューポートの少なくとも100％にしたい。コンテンツが1つの画面で修正されない場合は、展開する必要があります。シングルストラップでブートストラップコンテナを100％、高さ
htmlとbody要素の高さを少なくとも画面の高さに設定する一般的な解決策を検討しましたが、これらはブートストラップでは機能しないようです。私はそれがボーダーボックスに設定されたボックスサイズと関係があると考えています。
<div class='my-col'>
<div class='container'>
<p>My content goes here</p>
</div>
</div
使用min-height: 100vh：ここ
は、HTMLの例です。
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).
それを言うことができ
は、それはあなたを助ける願っています。
codepenに見て、あなたの問題
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ため、このコードを試してみてくださいも
分の高さ使用：あなたのコンテナの100VHと理由を保つためにコンテナ側の列？ –