要素を全面表示可能な高さにリサイズする方法

ヘッダーとフッターの間でフルページの高さにリサイズするdivを作成しようとしています。私はページ上に何かスクロールすることを望んでいない、私は周りを見回し、私のために働いている解決策を見つけることができません。要素を全面表示可能な高さにリサイズする方法

私のウェブページの写真です。

は、私は黒のボーダーボックスはドローダウン赤い線、どんなにブラウザ上のズーム比にすべての方法を拡張したいです。明らかに幅は既に働いていますが、私の人生は高さを得ることができません。あなたは、あなたが子供の高さを設定することができ、100％に htmlと bodyの高さを設定する必要が

<div class="row" style="height:100%;"> 
    <div class="col-md-2" style="border:1px solid black;"> 
     <div class="panel panel-success"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Links</h3> 
      </div> 
      <div class="panel-body"> 
       Panel content 
      </div> 
     </div> 
    </div> 
    <div class="col-md-10" style="border:1px solid black"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Viewer</h3> 
      </div> 
      <div class="panel-body"> 
       Panel content 
      </div> 
     </div> 
    </div> 
</div>

出典

2016-09-12 GrumpyCrouton

'高さ：100％;動作しません' –

@CalebAnthony。私はcol-md divと行divで試してみましたが、違いはありませんでした。 – GrumpyCrouton

：

は、ここに私のコードです。私は.rowクラスで100％を設定することをお勧めします。これはブートストラップなので、あなた自身のクラスを作ることができます。 100％の高さにするには列が必要です。

html, body { height:100% } 
.row-wrapper { height:100% } 
.row-wrapper .col-md-2, .row-wrapper .col-md-10 {height:100%}  

... 

<div class="row row-wrapper">

ただ、CSSルール.row-wrapper .col-md-2, .row-wrapper .col-md-10 {height:100%}は非常に柔軟ではないので、私は両方をターゲットに別のクラスを作成することをお勧めしたい心に留めておきます。

出典

2016-09-12 20:51:43

それは私のページを目に見えるほど大きくしましたが、それは私の箱には影響しませんでした。 – GrumpyCrouton

問題を見つけました。私の修正で修正が適用されていると思います。 –

親divの絶対位置と子divの絶対位置を作成し、高さと幅で動作します。

子DIV解像度サイズ

#divParent { 
 
    background-color: #0D0201; 
 
    height: 280px; 
 
    position: relative; 
 
} 
 
#divChild { 
 
    background-color: #F20914; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
@media screen and (min-width: 480px) { 
 
    #divParent { 
 
    height: 380px; 
 
    background-color: #524D4C; 
 
    } 
 
    #divChild { 
 
    background-color: #FF333C; 
 
    } 
 
} 
 
@media screen and (min-width: 680px) { 
 
    #divParent { 
 
    height: 480px; 
 
    background-color: #827F7E; 
 
    } 
 
    #divChild { 
 
    background-color: #F19189; 
 
    } 
 
} 
 
@media screen and (min-width: 980px) { 
 
    #divParent { 
 
    height: 600px; 
 
    background-color: #CFCDCC; 
 
    } 
 
    #divChild { 
 
    background-color: #F7C7C3; 
 
    } 
 
}

<body id="divParent"> 
 
    <div id="divChild" class="row"> 
 
    <div class="col-md-2" style="border:1px solid black;"> 
 
     <div class="panel panel-success"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">Links</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      Panel content 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-10" style="border:1px solid black"> 
 
     <div class="panel panel-primary"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">Viewer</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      Panel content 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-09-12 21:06:00 monikapatel

フレキシボックス（ブートストラップ3の一部ではない、残念ながら）に従って、親からの寸法を取得する、またはvhユニットは2つのオプションがあります。

.row-wrapper {height: 100vh;}

http://caniuse.com/#feat=viewport-units

出典

2016-09-12 21:06:06 isherwood

プラス1のリンクです。フライボックスを提案するときに、もっと多くの人がそれを使うことを望みます。 –

要素を全面表示可能な高さにリサイズする方法

答えて

関連する問題