CSS内に十分なコンテンツがない場合に要素全体をカバーする

ツールバーの下に表示される任意の高さ（私が明示的に制御していない）とメインコンテンツdiv（コンテナdiv内）を持つHTMLツールバーがあります。メインコンテンツ内のコンテンツの量は変わる可能性があります。CSS内に十分なコンテンツがない場合に要素全体をカバーする

コンテンツが利用可能で、画面全体をカバーするのに十分でない場合は、メインコンテンツのdivは、ツールバーの下の画面で利用可能な残りの高さをカバーする必要があります。コンテンツが画面サイズを超えている場合、完全なコンテンツを表示するのに適切な垂直スクロールバーが表示されます。あなたが希望する結果

を達成するために、カラム方向にflexを使用することができます

* { 
    margin: 0; 
} 

html, 
body { 
    height: 100%; 
} 
#container{ 
    height: 100% 
    width:100% 
} 
#main-div{ 
    // how to make it full screen when there isn't enough content 
}

出典

2017-05-22 Saif Ullah

そのため申し訳ありません。 –

問題ありません:) ...時には別の解決策が適しているので、変更する必要はないと感じていません。 – LGSon

あなたはbody列方向とフレックスコンテナを作るの使用フレキシボックス、containerflex: 1を埋めるためにmainflex: 1を与える最後に、残りの高さを記入し、行方向でも、その1つのフレックスコンテナを作る、として与えます水平に留まる。

* { 
 
    margin: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.container { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 
main { 
 
flex: 1; 
 
background: lightblue; 
 
}

<div class="toolbar"> 
 
    toolbar 
 
</div> 
 
<div class="container"> 
 
    <main>main</main> 
 
</div>

出典

2017-05-22 15:55:48 LGSon

：のように、現在、本体とhtmlのための私のCSSは見え

<html> 
    <body> 
     <toolbar></toolbar> 
     <container> 
      <main div>...</main div> 
     </container> 
    </body> 
</html>

：

私の構造が似ています

* { 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    height: 100%; 
 
} 
 
#container { 
 
    height: 100%; 
 
    width:100%; 
 
} 
 
#main-div { 
 
    flex: 1 1 auto; 
 
    background-color: green; 
 
}

<html> 
 
    <body> 
 
     <toolbar> 
 
      Content of toolbar with unknow height and you have no control of it 
 
     </toolbar> 
 
     <main id="main-div"> 
 
      Some content <br /> 
 
      Some content <br /> 
 
      Some content <br /> 
 
      Some content <br /> 
 
      Some content <br /> 
 
      Some content <br /> 
 
      Some content <br /> 
 
      Some content <br /> 
 
      Some content <br /> 
 
      Some content <br /> 
 
      Some content <br /> 
 
     </main> 
 
    </body> 
 
</html>

出典

2017-05-22 15:52:14 meteorzeroo

CSS内に十分なコンテンツがない場合に要素全体をカバーする

答えて

関連する問題