html - 画面いっぱい - ファースト ビュー 高 さ 100%




divをブラウザウィンドウの100%の高さにする (20)

私は、左のdivとrightのdiv 2つの列を持つレイアウトを持っています。

右のdivbackground-color灰色で、ユーザーのブラウザウィンドウの高さに応じて縦方向に展開する必要があります。 今、 background-colorはそのdiv最後のコンテンツで終わります。

私はheight:100%height:100%を試しましたmin-height:100%;


これは、ブラウザに応じてコンテンツの高さを自動的に変更します。 これがあなたに役立つことを願っています。 以下の例を試してみてください。

height:100%だけを設定する必要があります。

  html,body {
  height:100%;
  margin:0;
}
.content {
  height:100%;
  min-height:100%;
  position:relative;
}
.content-left {
  height:auto;
  min-height:100%;
  float:left;
  background:#ddd;
  width:50%;
  position:relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll     #aaa;
  width:50%;
  position:relative;
  float:left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width:50%;
  float:left;
  position:relative;
  overflow-y:scroll;  
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>


100vw ===ビューポートの幅の100%。

100vh ===ビューポートの高さの100%。

あなたが使用する必要があるbrowser-window-sizeのdiv幅または高さを100%に設定したい場合

幅: 100vw

高さ: 100vh

またはそれを小さくサイズを設定したい場合は、css calc function使用しcalc function 。 例:

#example { width: calc(100vw - 32px) }


CSS3測定ユニットがいくつか呼ばれています:

ビューポート - パーセンテージ(またはビューポート相対)の長さ

ビューポートのパーセンテージの長さは何ですか?

上記のリンク先のW3候補者勧告から:

ビューポートのパーセンテージの長さは、最初の包含ブロックのサイズに相対的です。 最初の包含ブロックの高さまたは幅が変更されると、それに応じて拡大または縮小されます。

これらの単位は、 vh (ビューポートの高さ)、 vw (ビューポートの幅)、 vmin (ビューポートの最小長)、 vmax (ビューポートの最大長)です。

仕切りをブラウザの高さに塗りつぶすにはどうすればいいですか?

この質問では、 vhを使うことができます: 1vhはビューポートの高さの1%です。 つまり、要素がDOMツリーのどこにあるかにかかわらず、 100vhはブラウザウィンドウの高さに等しくなります。

HTML

<div></div>

CSS

div {
    height:100vh;
}

これは文字通り必要なすべてです。 これはJSFiddleの使用です。

どのブラウザがこれらの新しいユニットをサポートしていますか?

これは現在、Opera Mini以外の最新の主要なブラウザすべてでサポートされています。 もっとサポートのために私は...を使うことができますかをチェックしてください。

これは複数の列でどのように使用できますか?

左側と右側の仕切りを特徴とする質問の場合、ここではvhvw両方を含む2列のレイアウトを示すJSFiddleの例がありvw

100vh100%違いは100vhですか?

たとえば、次のレイアウトを考えてみましょう。

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

ここのpタグは高さ100%に設定されていますが、 divを含むdiv高さは200pxなので、200pxの100%は200pxになり、 body高さ 100%になりません 。 代わりに100vh使用すると、 divタグの高さにかかわらずpタグがbody 100%の高さになります。 このJSFiddleを見て、違いを簡単に見てみましょう!


CSSでビューポート単位を使うことができます:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}

<div>または任意の要素の高さを設定する場合は、 <body><html>の高さを100%に設定する必要があります。 次に100%で要素の高さを設定することができます:)

次に例を示します。

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

<div>高さを100%に設定するには、いくつかの方法があります。

方法(A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>

方法(B):vh:

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>

フレックスボックスを使用する方法(c):

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>


height:100%を設定してみてくださいheight:100% htmlbodyheight:100%

html, 
body {
    height: 100%;
}

そして、あなたが2 divの同じ高さを使用したい場合、または親要素display:flexプロパティを設定したい場合。


min-height: 100%を追加し、高さを指定しないでください(またはautoに置く)。 それはまったく私の仕事でした:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

vhトップ投票のソリューションを含む他のすべてのソリューションは、 フレックスモデルソリューションと比較して最適ではありません。

CSSフレックスモデルの出現により、100%の高さの問題を解決することは非常に簡単になりheight: 100%; display: flex height: 100%; display: flex親のflex: 1 、子の要素のflex: 1 。 彼らは自動的にコンテナ内の利用可能なすべてのスペースを占有します。

マークアップとCSSの単純さに注意してください。 テーブルハックなど何もない。

フレックスモデルは、すべての主要なブラウザとIE11 +でサポートされています

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

フレックスモデルの詳細はこちらをご覧ください。


あなたは次のようないくつかの重要な詳細は言及していません:

  • レイアウトは固定幅ですか?
  • 列の一方または両方が固定幅ですか?

1つの可能性があります:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

どのカラムを固定する必要があり、どのカラムを液体にするかによって、これには多くのバリエーションがあります。 絶対配置でもこれを行うことができますが、私は通常、浮動小数点数を使用してより良い結果(特にクロスブラウザの点で)を見つけました。


ここに高さの修正があります。

あなたのCSSの使用:

#your-object: height: 100vh;

vh-unitsサポートしていないブラウザの場合は、modernizrを使用します。

このスクリプトを追加する( vh-units検出を追加する)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

最後に、この関数を使用して、ブラウザがvh-unitsサポートしていない場合は、ビューポートの高さを#your-objectに追加し#your-object

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

このソリューションはjQuery Iで実行されますが、列を画面のサイズに合わせるのに便利です。

ページの先頭から始まる列の場合、この解決法が最も簡単です。

body,html{
  height:100%;
}

div#right{
  height:100%
}

ページの先頭から開始していない列(たとえば、ヘッダーの下から開始している場合)。

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

最初の方法では、ボディの高さもカラムにも適用されます。これは、 height100% + height100%を意味します。

2番目の方法では、本文の高さを取得してユーザーに表示されるページの高さを取得し、ヘッダーのサイズを引いて、列を表示するためにどれだけの高さが残っているかを確認します。


これは私のために働いたものです:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

position:absolute代わりにposition:fixed使用すると、下にスクロールしても画面の最後まで拡張されます。


これは私のために働いた:

html, body {
    height: 100%; /* IMPORTANT!!! stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}

このページから取られました


ブロック要素は、デフォルトでは親の全幅を消費します。

これは、縦に積み重ねる設計要件を満たす方法です。

9.4.1ブロック書式設定コンテキスト

ブロックフォーマットのコンテキストでは、ボックスは縦に、収容ブロックの先頭から順に配置されます。

しかし、この動作は高さには及ばない。

デフォルトでは、ほとんどの要素はコンテンツのheight: autoheight: auto )。

幅とは異なり、余分なスペースが必要な場合は高さを指定する必要があります。

したがって、次の2点を覚えておいてください。

  • 全幅が必要な場合を除き、ブロック要素の幅を定義する必要があります
  • コンテンツの高さを必要としない限り、要素の高さを定義する必要があります

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>


単に "px"の代わりに "vh"ユニットを使用してください。これはビューポートの高さを意味します。

height:100vh;

最も簡単:

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>


次のCSSを使用して、ブラウザウィンドウの高さの100%をdivにすることができます。

display: block;
position: relative;
bottom: 0;
height: 100%;

要素を絶対的に配置できる場合は、

position: absolute;
top: 0;
bottom: 0;

それを行うだろう。


試してみてください:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}




height