divを展開して空きスペースをすべて取る

Question

デスクトップのような全面的な幅のレイアウトが欲しい。 上部にいくつかのメニュー（内容に応じて高さが分かります）、 とdivの下には、ビューポート内のすべての空きスペースが必要です。 menuはheight:10%とshould_fill_available_spaceは「持っている必要があります場合のように、私はshould_fill_available_spaceは、すべての道ダウンしたい https://codepen.io/marek-zganiacz/pen/NvEaxr

：私はこのような場合のためにcodepenを持って

div { 
 
    padding: 0px 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
.outer { 
 
    background: olive; 
 
    height: 100%; 
 
} 
 

 
.menu { 
 
    background: orange; 
 
} 
 

 
.should_fill_available_space { 
 
    background: brown; 
 
}

<div class="outer"> 
 
    <div class="menu"> 
 
    Lorem Ipsum Lorem Ipsum Lorem Ipsum 
 
    </div> 
 
    <div id="this" class="should_fill_available_space"> 
 
    Brown color should go all the way down 
 
    </div> 
 
</div>

高さ：90％ `。

Answer 1

これを達成する最も簡単な方法は、flexboxを使用することです。

1. display: flexを親コンテナに割り当てます。あなたの場合、これは外側の.outerです。
2. フレックスボックスは一方向に動作します。列（縦）または行（横）のように見ることができます。デフォルトの設定では、子要素を行の上に広げます。しかし、我々は列を作成したい。したがって.outerのflex-directionをflex-direction: columnに変更する必要があります。
3. これでフレックスボックスが.outerで利用可能なスペースの量をどのように分割するかを指定する必要があります。通常の動作では、フレックスボックスは子供に通常の幅/高さを与えます。しかし、flex:1を.should_fill_available_spaceに割り当てることによって、この要素は余分な空き領域をすべて得ます。フレックスボックスの基本的なことは、コンピュータが1/1200 = 100％（フレックス値をフレックス値を全子供の総フレックス値で割ったもの）を使用して、.should_fill_available_spaceに適用できる部屋で、.menuの幅を最小限に抑えたいということです。技術的にはflex:は他のいくつかのプロパティの短縮形ですが、それは本当にこの質問には関係ありません。ここで

は、あなたのJS-フィドルです：https://jsfiddle.net/cryh53L7/

HTML

<div class="outer"> 
    <div class="menu"> 
    Lorem Ipsum 
    Lorem Ipsum 
    Lorem Ipsum 
    </div> 
    <div id="this" class="should_fill_available_space"> 
    Brown color should go all the way down 
    </div> 
</div> 

CSS

div{ 
     padding: 0px 
    } 
    html, body{ 
     height: 100%; 
     padding: 0px; 
     margin: 0px; 
    } 
    .outer { 
     display: flex; 
     flex-direction: column; 
     background: olive; 
     height: 100%; 
    } 
    .menu{ 
     background: orange; 

    } 
    .should_fill_available_space{ 
     flex: 1; 
     background: brown; 

    } 

Answer 2

height属性を明示的に指定できます。

したがって、最初のdiv要素はheight of 10%となり、2番目のdiv要素はheight of 90%となります。

Answer 3

Try this!

私は、私はそれはあなたのために大丈夫です願っています:)

HTML、テーブル表示を使用：

<div class="outer"> 
<div class="menu"> 
    Lorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
</div> 
<div id="this" class="should_fill_available_space"> 
    Brown color should go all the way down 
</div> 

CSS：

div{ 
padding: 0px 
} 
html, body{ 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 
.outer { 
background: olive; 
height: 100%; 
display:table; 
width:100%; 
} 
.menu{ 
background: orange; 
display:table-row; 

} 
.should_fill_available_space{ 
background: brown; 
display:table-row; 
} 

div+ div{ 
height:100%; 
} 

Answer 4

これはCSS3のフレックスボックス（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）で実現できます。

は、それが動作を確認するには、このようなあなたのCSSを更新します。

.outer { 
    background: olive; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

.should_fill_available_space{ 
    background: brown; 
    flex-grow: 2; 
} 

Answer 5

これは、ウェブ文書の標準の世界は、ビューポートベースのデスクトップアプリケーションのエミュレーションを満たしているところです。コンテナを絶対配置する必要があります。これらのコンテナ内で、相対位置要素を設定したり、htmlフローを使用する要素を使用したりすることができます。

そこには数多くのAPIがありますが、それはカバーの下でそれを行うだけで、DOMに接続された後に要素を配置するためにjavascriptの計算に常に依存します。ここで

はあなたのコードに基づいて、簡単な例である：

div{ 
    padding: 0px 
} 
html, body{ 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 
.outer { 
    background: olive; 
    height: 100%; 
    width:100% 
    position:absolute; 
} 
.menu{ 
    background: orange; 
} 
.should_fill_available_space{ 
    background: brown; 
    position:absolute; 
    bottom:0px; 
    width:100vw; 
} 

<div class="outer"> 
    <div id="menu" class="menu"> 
    Lorem Ipsum 
    Lorem Ipsum 
    Lorem Ipsum 
    </div> 
    <div id="this" class="should_fill_available_space"> 
    Brown color should go all the way down 
    </div> 
</div> 

私が述べたように、あなたはメニューの、それはあなたのレイアウトに適用するよりも次元を取得するためにJavaScriptを使用することができます。

window.addEventListener("load", function load(event){ 
    var menu = document.getElementById("menu"); 
    var main = document.getElementById("this"); 
    var menuHeight = menu.offsetHeight; 
    main.style.top = menuHeight + "px"; 
},false); 

およびhere is the codepen。