css - 絶対DIV高さ100％

Question

私は過去数時間これに取り組んできました、そしてウェブとstackoverflowの検索はあまりサポートされていませんでした。ページ全体を作成#gradientして埋めるにはどうすればよいですか？#holes

Safariで要素の検査機能を使用しましたが、body要素を強調表示すると、ウィンドウ全体に表示されません。

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;
}

score 38 · Accepted Answer

Note that the height property specified in percentage is calculated with the respect to the containing block ..which doesn't necessary have to be the immediate ancestor – "The containing block for a positioned box is established by the nearest positioned ancestor or, if none exists, the initial containing block". I bet this is what's going on in the questioner's case as there is no positioned ancestor (the one with position: set either to relative or absolute).

So the "containing block" resolves to the initial containing block which corresponds with the dimensions of the viewport (window). Setting position:relative to body will take the body's height into account and stretch the absolutely positioned content along body completely.

More on containing block here.

score 17 · Accepted Answer

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

score 3 · Accepted Answer

[update]
new approach
This should do it ..

using display:table on your 2 elements should do it (it works in my tests). (but you wil have to assign width values now..

However i am not sure if you should define nested elements as table-cell etc.. which would become unmanageable..

Have a try though ..

old non working version
Have you tried on #gradient and #holes the following ?

#gradient {
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
#holes{
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}

score 3 · Accepted Answer

Well it looks to me that your element with all the content is floated. If it is then its not going to expand the body unless it is cleared.

score 2 · Accepted Answer

2

$('div.class').css({'height':(($(document).height()))+'px'});

于 2010-11-05T05:33:26.390 に答える

score 1 · Accepted Answer

The best way is to use javascript. min-height is not supported by every browser.

Javascript using prototype:

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

score 1 · Accepted Answer

Have you tried setting up like this?

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

Will stretch the element to fill the whole page area

score 0 · Accepted Answer

I think you did it right. This is working in Chrome (WebKit too!) and in IE7/8/Quirks whenever you put width: 100% on #gradient and #holes, can't test safari on Mac right now (only have it at home) but in theory you should be seeing it properly.

That said, maybe this is a doctype thing, try different ones?

score 0 · Accepted Answer

To be honest, I think I'm just going to overflow:auto on my content so that the entire page does not need to be scrolled

score 0 · Accepted Answer

Apply the CSS styles to both #gradient & #holes & put the script after your 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>

score -1 · Accepted Answer

If I remember correctly, in order be able to specify positions of a container's (A) child containers (B1, B2, ...), it's position should be absolute. Your body container's position isn't.

I guess you should add the position:absolute; property to the html,body selector.

css - 絶対DIV高さ100％

11 に答える 11

Related

Reference