22

ページに 100px (正確には 111px) をわずかに超えるヘッダーがあります。その下の div は、下を 0px に設定したかのように、ビューポートの一番下まで拡張する必要があります。問題は、ie6 で top と bottom を指定できないことにあります (バグ)。

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

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

これが私のcssコードです：

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

助言がありますか？

4

9 に答える 9

26

これを行う最善の方法は、ビュー ポート スタイルを使用することです。それは仕事をするだけで、他のテクニックは必要ありません。

コード：

div{
  height:100vh;
}
<div></div>

于 2015-02-14T18:38:42.470 に答える
22

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

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;
}
于 2009-09-04T15:25:12.640 に答える
6

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

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

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

于 2009-09-04T15:05:09.163 に答える
5

css3 を使用すると、calc() を使用することができます。

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

この答えを見てください： Div幅100％から固定量のピクセルを差し引いたもの

于 2013-09-27T00:09:12.480 に答える
5 

div{
  height:100vh;
  background-color:gray;
}
<div></div>

于 2015-10-25T16:28:52.153 に答える
1

スティッキーフッターを取得しようとしていると思います

于 2009-09-02T09:03:55.477 に答える
0

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 を使用できます。

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

于 2015-12-29T07:02:03.537 に答える
0

もちろんマイナスマージン！

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;
}
于 2009-09-02T10:00:06.923 に答える