web-dev-qa-db-ja.com

CSS：Divの高さを100％に設定-ピクセル

ページに100px（正確には111px）を超えるヘッダーがあります。下のdivは、ビューポートの下部まで拡張する必要があります。下部を0pxに設定した場合と同じです。問題は、ie6でtopとbottomを指定できないという事実にあります（バグ）。

Top：111pxまたはbottom：0pxのいずれかを指定できますが、高さを正しくする必要があります。ビューポートのサイズに応じて、100％-111px。

解決策であると思われる式を動作させることができないようです

これが私のCSSコードです。

position: absolute; 
width: 200px; 
top: 111px; 
bottom: 0px;

助言がありますか？

csshtmlheight
20
moonblade

heightプロパティをbodyおよびhtmlタグに追加しました。

HTML：

<body>
<div id="wrapper">
 <div id="header">header</div>
 <div id="content">content</div>
</div>

CSS：

html, body
{
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper
{
    height: 100%;
    min-height: 100%;
}
#header
{
    height: 111px;
}
22
ranonE

これを行う最良の方法は、ビューポートスタイルを使用することです。作業を行うだけで、他の技術は必要ありません。

コード：

div{
  height:100vh;
}
<div></div>
22
Blaise M.

または、position:absoluteを使用することもできます。

#content
{
    position:absolute;
    top: 111px;
    bottom: 0px;
}

ただし、IE6はtopおよびbottom宣言を好みません。しかし、Web開発者はIE6が好きではありません。

6
Eric
div{
  height:100vh;
  background-color:gray;
}
<div></div>
5
Mohit Sharma

Css3を使用すると、calc（）を使用できます。

.main{
  height: calc(100% - 111px);
}

次の答えをご覧ください： 分割幅100％-ピクセルの固定量

4
RaphKomjat
div{
  height:100vh;
}
<div></div>
4
Mohammed K. Abushawish

私はあなたが sticky footer を取得しようとしていると推測しています

1
n1313

もちろん負のマージン！

HTML

<div id="header">
    <h1>Header Text</h1>
</div>
<div id="wrapper">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
        ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus 
        vel quam et quam congue sodales.
    </div>
</div>

CSS

#header
{
    height: 111px;
    margin-top: 0px;
}
#wrapper
{
    margin-bottom: 0px;
    margin-top: -111px;
    height: 100%;
    position:relative;
    z-index:-1;
}
#content
{
    margin-top: 111px;
    padding: 0.5em;
}
0
Eric

100vhはうまく機能しますが、最初は同様の問題に取り組むために、javascript（実際はjQueryですが、それを調整できます）を使用していました。

HTML

<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="content">content</div>
  </div>
</body>

js/jQuery

var innerWindowHeight = $(window).height();
var headerHeight = $("#header").height();
var contentHeight = innerWindowHeight - headerHeight;
$(".content").height(contentHeight + "px");

または、headerHeightを計算したくない場合は、111pxを使用できます。

また、たとえばウィンドウの高さが増加した場合にスクリプトを再実行するために、これをウィンドウのサイズ変更イベントに入れることもできます。

0
Chiwda