css - html body size of window




divを残りの画面スペースの高さに塗りつぶす (20)

私は現在、コンテンツを画面全体の高さに塗りつぶしたいWebアプリケーションを作成しています。

このページには、ロゴとアカウント情報が含まれたヘッダーがあります。 これは任意の高さにすることができます。 私は、コンテンツdivがページの残りの部分を一番下に埋めるようにしたい。

私はヘッダdivとコンテンツdivを持っています。 現時点で私はレイアウトのためにテーブルを使用しています:

CSSとHTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

ページの高さ全体が塗りつぶされ、スクロールする必要はありません。

コンテンツdiv内のものは、 top: 0;設定しtop: 0; ヘッダーのすぐ下に置きます。 コンテンツが実際のテーブルになることがあります。その高さは100%に設定されています。 content内にheaderを置くことは、これが動作するのを許可しません。

tableを使用せずに同じ効果を達成する方法はありtableか?

更新:

コンテンツdiv内の要素の高さもパーセンテージに設定されます。 だから、 div内の100%の何かがそれを底に埋めるでしょう。 50%で2つの要素があります。

アップデート2:

たとえば、ヘッダーが画面の高さの20%を占める場合、 #content内の50%で指定された表は、画面スペースの40%を占めます。 今のところ、テーブルに全体をラップするだけで動作します。


免責事項:受け入れられた答えは解決策のアイデアを示しますが、私はそれが不必要なラッパーとCSSのルールで少し肥大しているのを発見しています。 以下は、ほとんどCSSルールがないソリューションです。

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

上記のソリューションは、 ビューポートユニットhttp://caniuse.com/#feat=flexboxを使用しているため、IE10 +の古い構文を使用している場合はIE10 +です。

コデペンと遊ぶ:codepenへのリンク

または、オーバーフローするコンテンツの場合にメインコンテナをスクロール可能にする必要がある場合は、これをコードページにリンクします


CSSのみのアプローチ(高さが既知/固定の場合)

中央の要素をページ全体にまたがるようにするには、CSS3で導入されたcalc()を使用できます。

固定された高さの headerfooter要素があると仮定し、 sectionタグで使用可能な垂直高さ全体を取得します。

Demo

想定マークアップ

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

あなたのCSSは

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

そこでここでは、要素の高さを足して、 calc()関数を使って100%を差し引いて計算します。

ちょうどあなたがheight: 100%;を使用することを確認してくださいheight: 100%; 親要素については


CSSグリッドソリューション

display:gridbodygrid-template-rows bodyを定義するには、 autofr valueプロパティを使用します。

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

グリッド@ CSS-Tricks.comの完全なガイド


CSS3シンプルウェイ

height: calc(100% - 10px); // 10px is height of your first div...

最近のすべての主要なブラウザでサポートされているので、ヴィンテージブラウザをサポートする必要がない場合は、先に進んでください。


これは純粋にCSS vhを使って行うことができます:

#page 
{
  display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent 
{
  float:left; width:100%; display:block;
}
#content 
{      
float:left; width:100%; height:100%; display:block; overflow:scroll;
}

およびHTML

<div id="page">
   <div id="tdcontent">
   </div>
   <div id="content">
   </div>
</div>

私はそれをチェックしました、それはすべての主要なブラウザで動作します: ChromeIE 、およびFireFox


これを試して

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

なぜこれほど好きではないのですか?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

あなたにhtmlとbodyを(その順序で)高さを与えてから、あなたの要素に高さを与えますか?

私のために働く


コンテンツが高すぎるときに下のdivをスクロールする必要があるときは、どのソリューションも動作しません。 その場合は次のような解決策があります:

HTML:

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.container {
  width: 400px;
  height: 300px;
}
.header {
  background: cyan;
}
.body {
  background: yellow;
  height: 100%;
}
.body-content-outer-wrapper {
  height: 100%;
}
.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}
.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

元のソース:CSSのオーバーフローを処理中にコンテナの残りの高さを埋める

JSFiddleライブプレビュー


マークアップで表を使用する代わりに、CSS表を使用できます。

マークアップ

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(関連性のある)CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1FIDDLE2

この方法のいくつかの利点は次のとおりです。

1)少ないマークアップ

2)マークアップは表より意味があります。これは表形式のデータではないためです。

3)ブラウザのサポートは非常に良いです:IE8 +、すべての最新のブラウザとモバイルデバイス( caniuse

完全性のために、 CSSのテーブルモデルのCSSプロパティに相当するHtml要素を次に示します

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

モバイルアプリの場合は、VHとVWのみを使用してください

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

デモ - https://jsfiddle.net/u763ck92/


今、たくさんの答えがありますが、私は高さ:100vhを使っています。 利用可能な垂直スペース全体を埋める必要のあるdiv要素を処理する必要があります。

このようにして、私はディスプレイやポジショニングで遊ぶ必要はありません。 これは、ブートストラップを使って私がサイドバーとメインを持っていたダッシュボードを作るときに便利でした。 私はメインが伸ばして縦のスペース全体を埋めるようにして、バックグラウンドカラーを適用できるようにしました。

div {
    height: 100vh;
}

IE9以降をサポート: クリックするとリンクが表示されます


何が私のために働いたのか(別のdiv内のdivを使って、私は他のすべての状況で仮定します)は、底部のパディングを100%に設定することです。 つまり、これをCSS /スタイルシートに追加します:

padding-bottom: 100%;

元の投稿は3年以上前です。 私のようなこの記事に来る多くの人は、アプリのようなレイアウトソリューションを探しています。何とか固定ヘッダ、フッタ、残りの高さのコンテンツが残りの画面を占めています。 もしそうなら、この投稿は役に立つかもしれません、それはIE7 +などで動作します。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

そして、その記事の抜粋です:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>


古いブラウザ(MSIE 9以前)をサポートしていない場合は、既にW3C CRのhttp://caniuse.com/#feat=flexboxで対応できます。 このモジュールでは、コンテンツの並べ替えなど、その他の素晴らしいトリックも許可されます。

残念ながら、MSIE 9以下はこれをサポートしていないため、Firefox以外のすべてのブラウザでCSSプロパティのベンダープレフィックスを使用する必要があります。 まもなく、他のベンダーもすぐに接頭辞を削除したいと考えています。

もう1つの選択肢は、 CSSグリッドレイアウトですが、それは安定版のブラウザからのサポートがさらに少なくなります。 実際には、MSIE 10のみがこれをサポートしています。


実際には、CSSでこれを行うための健全なクロスブラウザの方法はありません。 レイアウトが複雑であると仮定すると、JavaScriptを使用して要素の高さを設定する必要があります。 あなたがする必要があることの本質は次のとおりです。

Element Height = Viewport height - element.offset.top - desired bottom margin

この値を取得して要素の高さを設定すると、イベントハンドラをウィンドウのonloadとonresizeの両方にアタッチして、サイズ変更機能を起動する必要があります。

また、コンテンツがビューポートよりも大きい場合は、overflow-yをスクロールするように設定する必要があります。


氏エイリアンのアイデアをスピンして...

これは、CSS3対応のブラウザ用の一般的なフレックスボックスよりもクリーンなソリューションに見えます。

コンテンツブロックへのcalc()のmin-height(高さの代わりに)を使用するだけです。

calc()は100%で始まり、ヘッダーとフッターの高さを引いています(パディング値を含める必要があります)

"height"の代わりに "min-height"を使用すると、javascriptでレンダリングされたコンテンツやAngular2のようなJSフレームワークで動作するので、特に便利です。 それ以外の場合は、JavaScriptのレンダリングされたコンテンツが表示されてから、ページの下部にフッターが移動されません。

ここでは、50pxの高さと20pxの両方のパディングを使用するヘッダーとフッターの簡単な例を示します。

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

CSS:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

もちろん、数学は単純化することができますが、あなたは考えを得る...


私はしばらくこのことを諦め、次のように終わった。

コンテンツDIVを親と同じ高さにするのは簡単ですが、親の高さからヘッダーの高さを差し引くことは明らかに困難です。コンテンツの高さをフルハイトにすることを決めましたが、左上隅に絶対配置し、ヘッダーの高さを持つ上部のために。 このようにして、コンテンツはヘッダーの下にきちんと表示され、残りのスペース全体が満たされます。

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

私は同じ問題を抱えていましたが、私は上記のフレックスボックスで解決策を作ることができませんでした。 だから自分のテンプレートを作ったんだ。

  • 固定サイズの要素を持つヘッダ
  • フッター
  • 残りの高さを占めるスクロールバーを持つサイドバー
  • コンテンツ

フレックスボックスを使用しましたが、より簡単な方法では、プロパティのみを表示します:flexflex-direction:row | column

私は角度を使用して、自分のコンポーネントのサイズを親要素の100%にしたい。

キーは、サイズを制限するためにすべての親のサイズを(パーセントで)設定することです。 次の例では、myappの高さはビューポートの100%です。

ヘッダーとフッターは5%のため、メインコンポーネントのビューポートは90%です。

ここにテンプレートを投稿しました: https://jsfiddle.net/abreneliere/mrjh6y2e/3 : https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

NICCAIが最初の答えで示唆したようにJavaScriptを使用することで他の方法で私のために働いことはありませんでした。私はこのアプローチを使って<div>、Google Maps を再スケーリングしています。

ここでそれを行う方法の完全な例です(Safari / FireFox / IE / iPhone / Andorid(回転で動作する)で動作します):

CSS

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

JS

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>

 style="height:100vh"

私の問題を解決しました。 私の場合は、これを必要なdivに適用しました





html-table