wake-up-neo.com

Absolute DIV-Höhe 100%

Ich habe in den letzten paar Stunden daran gearbeitet, und das Web und den Stackoverflow zu durchsuchen, war nicht viel Unterstützung. Wie fülle ich #gradient und #holes die gesamte Seite aus?

Ich habe die Funktion "Element prüfen" in Safari verwendet. Wenn ich das Körperelement hervorhole, füllt es nicht das gesamte Fenster aus.
alt text http://img534.imageshack.us/img534/9955/screenshot20100201at215.png

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

Nun, es scheint mir, dass Ihr Element mit dem gesamten Inhalt schwebend ist. Wenn dies der Fall ist, wird der Körper nicht ausgedehnt, wenn er nicht gelöscht wird. 

3
prodigitalson

Beachten Sie, dass die height -Eigenschaft, die in percent angegeben ist, berechnet in Bezug auf den enthaltenden Block .. was nicht unbedingt der unmittelbare Vorfahr sein muss - "Der umschließende Block für eine positionierte Box wird durch den nächsten positionierten Vorfahren oder festgelegt Ist dies nicht der Fall, enthält die Initiale den Block " . Ich wette, dies ist der Fall des Fragestellers, da es keinen positionierten Vorfahren gibt (der mit position:, der entweder auf relative oder absolute gesetzt ist).

Der "enthaltende Block" wird also in den anfänglichen enthaltenden Block aufgelöst, der den Abmessungen des Ansichtsfensters (Fensters) entspricht. Wenn Sie position:relative auf body setzen, wird die Höhe von body berücksichtigt und der absolut positionierte Inhalt wird entlang von body vollständig gestreckt.

Mehr zum Block hier.

38
Adam

Ich hatte das gleiche Problem. Fixiert durch Ändern der Position: absolut in Position: fest.

16
Doug Hamlin

[update]
neuer Ansatz
Das sollte es tun ..

verwenden Sie display:table für Ihre 2 Elemente. (funktioniert in meinen Tests). (aber Sie müssen jetzt Breitenwerte zuweisen ..

Ich bin mir jedoch nicht sicher, ob Sie verschachtelte Elemente als Tabellenzellen usw. definieren sollten.

Versuchen Sie es doch einmal ..

alte nicht funktionierende Version
Haben Sie #gradient und #holes folgendes ausprobiert?

#gradient {
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
#holes{
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
3
Gabriele Petrioli
$('div.class').css({'height':(($(document).height()))+'px'});
2
beacks

Hast du versucht, das so einzurichten?

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

Streckt das Element so, dass es den gesamten Seitenbereich ausfüllt

1
Pete B

Am besten verwenden Sie Javascript. min-height wird nicht von jedem Browser unterstützt. 

Javascript mit Prototyp:

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

Wenden Sie die CSS-Stile auf #gradient & #holes an und fügen Sie das Skript nach Ihrem DIV ein.

.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

Ich denke, du hast es richtig gemacht. Dies funktioniert in Chrome (auch WebKit!) Und in IE7/8/Quirks, wenn Sie width setzen: 100% für #gradient und #holes. Safari kann auf Mac derzeit nicht getestet werden (nur zu Hause), aber theoretisch Sie sollten es richtig sehen. 

Das heißt, vielleicht ist das eine Doctype-Sache, versuchen Sie es mit anderen?

0
Francisco Aquino

Um ehrlich zu sein, denke ich, overflow:auto meine Inhalte, so dass die gesamte Seite nicht durchlaufen werden muss

0
woody993