content div常に100％の画面高さをCSSで取得する

私は次のウェブページを持っています。 content div常に100％の画面高さをCSSで取得する

私は画面の高さ全体を満たすために青い赤と白のグラデーションを得ようとしています。現在、私は両方のフラグをコンテンツコンテナの両側に持っており、それらのすべてがメインコンテナに囲まれています。

.container{ 
    width: 100%; 
    background: -webkit-linear-gradient($blueToRed); 
    background: -o-linear-gradient($blueToRed); 
    background: -moz-linear-gradient($blueToRed); 
    background: linear-gradient($blueToRed); 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
    overflow: auto; 
}

は、私は100％の高さに含まれて取得しようとしています

.firstContain{ 
    border-left: 4px solid white; 
    border-right: 4px solid white; 
    background: #FFF; 
    max-width: 980px; 
    position: relative; 
    display: block; 
    margin: 0 auto; 
    overflow: auto; 
    z-index:1000; 
}

firstContain

の内側にあるが、私はそれを追加し、それが移動しません。私は99999のマージンパディングトリックがうまくいくと思っていましたが、その後、動作させたCSSを失ってしまいました。どんな助けも歓迎です。私が間違っていることのアドバイスを事前に感謝します。今の

出典

2017-02-14 tcoulson

body' 'の直接の子である.container'、あなたはおそらくも必要'と仮定すると、 'html、body、.container {height：100％; } 'しかし、コードの残りの部分を見ずに言うのは難しいです。 –

vhユニットを試してください。このようなあなたのスタイルであなたのhtml, body, .container両方でheight: 100%を追加

.container{ 
    min-height:100vh; 
}

出典

2017-02-14 04:49:49

ええ、そのトリックでした。ありがとう。ビューの高さを忘れました。 – tcoulson

高さをカバーするためにページ内の要素がないことから、多分あなたは、あなたのコンテナのCSSに

min-height: 100%;

で行くことができます。だから、分の高さはあなたのために仕事をする必要があります！

出典

2017-02-14 04:45:56

試してみてください。

html, body, .container { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    border-left: 4px solid white; 
 
    border-right: 4px solid white; 
 
    background: #333; 
 
    max-width: 980px; 
 
    position: relative; 
 
    display: block; 
 
    margin: 0 auto; 
 
    overflow: auto; 
 
    z-index:1000; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <header></header> 
 
     <div class="container"> 
 
      <p>Website Content</p> 
 
     </div> 
 
     <footer></footer> 
 
    </body> 
 
</html>

出典

2017-02-14 04:50:00 prtdomingo

content div常に100％の画面高さをCSSで取得する

答えて

関連する問題