ブートストラップ3レイアウトで一貫したフルハイト垂直サイジング？

私はかなり単純なBootstrap 3ベースのレイアウトを持っています。ここでは、ブラウザウィンドウのサイズが変更されたときに、メインエレメント（中央のdiv）を垂直方向に拡張または縮小して、その下の2つの要素すべての要素の高さがウインドウの高さをオーバーフローさせず（したがって、スクロールバーを表示させる）またはアンダーフローしない（したがって、ウインドウ内に視認可能な垂直スペースを無駄にしない）。ブートストラップ3レイアウトで一貫したフルハイト垂直サイジング？

これを達成するために最も近いのは次のとおりです。問題は、 ".90-height"クラス（height: 90%）は、垂直ウィンドウのサイズに応じて、すべての要素の合計高さがわずかに小さすぎたり、多少大きすぎたりすることです。

CSS：

.full-height { height: 100%; } 
.90-height { height: 90%; } 
.doborder { border: 1px solid; border-color: #ddd; border-radius: 4px; } 
.controlsdiv { display: table; width: 100%; }

HTML： - 私はいろいろなことのためにそれらのすべてを必要とするよう、すなわち要素のいずれかを削除

<html class="full-height"> 
    <body class="full-height"> 

     <div class="navbar navbar-fixed-top" style="min-height:20px !important;"> 

     <div class="container-fluid full-height"> 
     <div class="row 90-height"> 
      <div class="90-height"> <-- Main column --> 
       <div class="doborder full-height"> 

        <-- Content here --> 

       </div> 
       <div class="controlsdiv"> 
        <-- Couple of controls in here --> 
       </div> 
      </div> <-- End main column --> 
     </div> <-- End row --> 

     <footer style="margin-top: 30px;"> 
      <span>Some text</span> 
     </footer> 

     </div> <-- End container --> 

    </body> 
</html>

だけの事は、私は全くこのような構造を簡素化することができないです。

出典

2017-05-13 Alex Kerr

あなたは閉じるのを忘れましたt彼はnavbar divですか？ – ZimSystem

[残りの垂直スペースのみをCSSで埋め込む]（http://stackoverflow.com/questions/23389098/fill-remaining-vertical-space-only-css） –

これにアプローチする方法はいくつかあります。また、CSSクラス名は数字で始めるべきではないことを覚えておいてください。本文からフッターの高さを引くには、CSS calc()を使うことができます。メイン容器に一度だけheight-90を使用する必要があります。

CSS計算値（）デモhttp://www.codeply.com/go/mbXpavYiV8

.height-90 { height:calc(100% - 50px); } 

<div class="navbar navbar-default navbar-fixed-top"> 
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">Link</a></li> 
    </ul> 
</div> 
<div class="container-fluid height-90 bg-info"> 
    <div class="row"> 
     <div class=""> 
     </div> 
     <div class="controlsdiv"> 
     </div> 
    </div> 
</div> 
<footer style="margin-top: 30px;"> 
    <span>Some text</span> 
</footer>

別の解決策は、フレキシボックスを使用することです。..

.full-height { display: flex; flex-direction: column; height: 100%; } 
.fill-height { flex-grow: 1; width: 100%; }

フレキシボックスデモhttp://www.codeply.com/go/tFUf5XFe29

出典

2017-05-13 14:57:16 ZimSystem

の重複の可能性があり、本当に感謝してくれました。私は行のdivと2つの内側のdivの間の私のレイアウトの余分なdivレイヤーを考慮する必要があったが、最後にそれを働かせた。私の唯一の質問は、CSSの計算で正確なピクセル測定値（例：50ピクセル）を使用する場合です。これらの値はブラウザによって若干異なりますか？すべてのデスクトップブラウザとできるだけ多くのモバイルサイトで作業するために私のコードが必要です。 –

Flexboxは有望そうですが、今日使用されているほとんどのブラウザでは完全にサポートされていないため、使用できません... –

ブートストラップ3レイアウトで一貫したフルハイト垂直サイジング？

答えて

関連する問題