2 
<html>
    <head>
        <style>
            .100PercentHeight{ }
        </style>

        </style>

    <body>
        <div class='100PercentHeight'>hihi</div>
    </body>
</html>

div をページの 100% の高さに伸ばすにはどうすればよいですか?

4

9 に答える 9

8

試してください (ほとんどのブラウザーで動作するはずです):

.100PercentHeight, html, body {
    height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */
}
于 2009-06-04T16:49:01.077 に答える
6

申請中

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

探している効果が得られるはずです。3つすべてで必要です。

ただし、多くの場合、実際には思ったとおりに動作せず、問題が発生する可能性があります。フェイクコラム手法または「スティッキーフッター」の方がうまくいく傾向があります。

于 2009-06-04T16:47:23.437 に答える
1

JavaScriptを介して実行する場合、このコードはほとんどのDOMブラウザーで機能するはずです...

<div id="fullDiv" style="border: solid 2px black;">
    Hello example
</div>

<script type="text/javascript">

    var div = document.getElementById('fullDiv');

    div.style.height = document.documentElement.clientHeight + 'px';

</script>
于 2009-06-04T17:10:42.627 に答える
1

ボディの高さを 100% に設定する必要があります。

body {
...
height:100%;
...
}
于 2009-06-04T16:46:20.037 に答える
1

例として、これは機能します。

<div style="width:100%; height:100%; border-style:solid; border-width:5px;">
  test
</div>
于 2009-06-04T16:47:27.273 に答える
1

これが私が知っている最も簡単な解決策です。ただし、残念ながら、vh (ビューポートの高さ) 単位をサポートしていないため、Internet Explorer 8 以前では機能しません。

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

#full-height{
  min-height: 100vh;
}
</style>
</head>
<body>
<div id='full-height'>

</div>
</body>
</html>
于 2016-06-13T03:13:04.200 に答える
1 
html {
    height: 100%;
}

DOCTYPE がある場合、これは機能しません。私も答えを探していますが、DOCTYPEがあります。ただし、DOCTYPE を使用してそれを行う方法はありますが、2 つの div が左右に並んでいる場合は機能しません。試してください:

(div-name) {
    position: absolute;
}

2 つの div を横に並べて使用する場合、これは見栄えがよくないことに注意してください。ただし、他のタイプでも問題なく機能します。

于 2012-06-27T04:25:16.653 に答える
1 
<style>
.100PercentHeight{margin:0; height:100%}

</style>
于 2009-06-04T16:45:24.687 に答える
1

使用する：

{
    position: absolute;
    top: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
}

このようにして、ブラウザの 1 ビューの長さよりも長い場合は、ページを中央に配置してカバーします。

于 2009-06-04T16:48:52.730 に答える