web-dev-qa-db-ja.com

絶対DIV高さ100％

私は過去数時間この問題に取り組んでおり、Webとstackoverflowの検索はあまりサポートされていません。 #gradientと#holesでページ全体を埋める方法を教えてください。

Safariで「要素の検査」機能を使用しましたが、body要素を強調表示してもウィンドウ全体に表示されません。
alt text

HTML：

<body>

    <div id="gradient"></div>
    <div id="holes"></div>

    <div id="header">Header Text</div>
</body>

CSS：

html, body {
    height:100%;

    margin:0;
    padding:0;
}

body {
    background-image:url(../Images/Tile.png);
    background-color:#7D7D7D;
    background-repeat:repeat;
}

#gradient {
    background-image:url(../Images/Background.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    right:0px;
}

#holes {
    background-image:url(../Images/Holes.png);
    background-repeat:repeat;

    position:absolute;
    top:2px;
    left:2px;
    height:100%;
    right:0px;
}

#header {
    background-image:url(../Images/Header.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    width:100%;

    padding-top:24px;
    height:49px; /* 73 - padding */

    color:rgb(113, 120, 128);
    font-family:Helvetica, Arial;
    font-weight:bold;
    font-size:24px;
    text-align:center;
    text-shadow:#FFF 0px 1px 0px;
}
csshtmlheightabsolute
23
woody993

さて、すべてのコンテンツを持つあなたの要素が浮いているように私には見えます。それがクリアされない限り、それはそれからそれは体を拡張するつもりはありません。

3
prodigitalson

percentageで指定されたheightプロパティは 包含ブロックに関して計算される であることに注意してください。これは、直接の祖先である必要はありません– "配置されたボックスの包含ブロックは、最も近い配置された祖先または、存在しない場合は、初期包含ブロック " 。配置された祖先（position:がrelativeまたはabsoluteに設定されているもの）がないため、これは質問者のケースで何が起こっているに違いない。

したがって、「包含ブロック」は、ビューポート（ウィンドウ）のサイズに対応する 最初の包含ブロック に解決されます。 position:relativeをbodyに設定すると、bodyの高さが考慮され、絶対配置のコンテンツがbodyに沿って完全に引き伸ばされます。

ここに含まれるブロックの詳細

38
Adam

私は同じ問題を抱えていました。位置：絶対位置から位置：固定に変更して修正しました。

16
Doug Hamlin
$('div.class').css({'height':(($(document).height()))+'px'});
2
beacks

このように設定してみましたか？

#holes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

要素を伸ばしてページ領域全体を埋めます

1
Pete B

最善の方法は、JavaScriptを使用することです。 min-heightはすべてのブラウザでサポートされているわけではありません。

プロトタイプを使用したJavaScript：

<script type="text/javascript">
var height = $(document.body).getHeight();
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>');
</script>
1
sabansaulic

CSSスタイルを#gradientと#holesの両方に適用し、DIVの後にスクリプトを配置します。

.background-overlay{
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

<body>
    <div id="gradient"></div>
    <div id="holes"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            var bodyHeight = $("body").height();
            $('#gradient,#holes').height(bodyHeight);

        })
    </script>


    <div id="header">Header Text</div>
0
Amresh Raut

あなたはそれを正しくやったと思います。これは、Chrome（WebKitも！）で機能しており、IE7/8/Quirksで#gradientと#holesに幅100％を設定すると、Macでサファリをテストできません（家にあるだけですが）理論的には適切に表示されるはずです。

とは言っても、おそらくこれはdoctypeのものです。別のものを試してください。

0
Francisco Aquino

正直なところ、私はoverflow:autoページ全体をスクロールする必要がないように、コンテンツに

0
woody993