• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div soll restliche Höhe einnehmen

H

hannit

Neues Mitglied
Hallo !

Ich habe den folgenden Code :

PHP: 
<div id="content">
   <div id="header"></div>
   <div id="menu"></div>
   <div class="wrap">
           <div id="text"></div>
   </div>
   <div id="splitter"></div>
</div>
<div id="footer"></div>

Dazu folgendes CSS

PHP: 
#content{
    height: auto !important;    margin: 0 auto -120px;    min-height: 100%;
}

#header {   
 background-image: url(....);
 border-bottom: 1px solid #999999;    overflow: hidden;
}
#menu{
    background-color: #0171AB;    border-bottom: 5px solid #F1F1F1;    height: 68px;    overflow: hidden;}

.wrap {    margin-left: auto;    margin-right: auto;    width: 980px;}
#text {
    margin-left: auto;    margin-right: auto;    overflow: hidden;    padding-top: 10px;    width: 980px;
    margin-bottom: 15px;
}

#footer, #splitter{
    clear: both;
    height: 119px;    margin: 0 auto;}

#footer {    background: none repeat scroll 0 0 white;    border-top: 1px solid #E4E4E4;    bottom: 0;
    text-align: center;    width: 980px;}

Im div text soll der Inhalt rein. Unten ist der Footer fixiert. Ich hätte nun gerne, dass das div text die volle restliche Höhe einnimmt. Wie kann ich das machen ?
 
Hallo,

ich habe mit der Suche diesen Thread gefunden. Ich möchte ebenfalls ein DIV oben in kompletter Breite (kein Probem), anschließend darunter zwei DIVs (Navigation, Content) und diese sollen sich in der Höhe entsprechend anpassen, sprich im Browser bis unten hin reichen.

Meine Versuche sind leider alle gescheitert und der Post über mir bringt mich irgendwie auch nicht weiter.

Mein aktueller Code:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DIV soll nur zum Ende der Seite, nicht weiter!</title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#logo {
    height:40px;
    background:red;
}
#box1 {
    background-color: #000;
    height:100%;
    width: 200px;
    float:left;
}
#box2 {
    background-color: #999;
    margin-left:200px;
    height: 100%;
    width: auto;
}
</style>
</head>

<body>

<div id="logo"></div>
<div id="box1"></div>
<div id="box2"></div>

</body>
</html>

Ich würde mich sehr über eine Hilfestellung freuen und danke im Voraus!

Dennis1993
 
In dem Fall würde ich glatt mal absolute Positionierung einsetzen.
HTML: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DIV soll nur zum Ende der Seite, nicht weiter!</title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#logo {
    height:40px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}
#box1 {
    background-color: #000;
    height:100%;
    width: 200px;
    float:left;
}
#box2 {
    background-color: #999;
    margin-left:200px;
    height: 100%;
    width: auto;
}

#box1 > div, #box2 > div { padding-top: 40px; }

</style>
</head>

<body>

<div id="logo"></div>
<div id="box1"><div></div></div>
<div id="box2"><div></div></div>

</body>
</html>
 
So vielleicht?
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website</title>
<style type="text/css">

html , body , #container {
 height:100%;
}
* {
 
 margin:0;
 padding:0;
}

#container {
 width:960px;
 background:#444  ;
 margin:0 auto;
}

#header {
 height:100px;
 background:#09c;
 color:#fff;
}

#navi {
 height:50px;
 background:#add;
}

#inhalt {
 margin-bottom:100px;
 background:#444;
 color:#fff;
}


#footer {
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 width:960px;
 margin:0 auto;
 background:#09c;
 color:#fff;
 height:100px;
 
}

p { 
 padding:10px;
}

</style>
</head>
<body>

<div id="container">
<div id="header"><h1>Homepage</h1></div>
  <div id="navi">
   <p>Navigation</p> 
  </div>
  <div id="inhalt">
    <p>Hier kommt der Inhalt</p>
  </div>
</div>
<div id="footer">footer</div>

</body>
</html>
 
Zuletzt bearbeitet:
Hey,
das sieht sehr gut aus, damit komme ich weiter.

Eine Frage noch: Ich möchte natürlich verstehen, was ihr gemacht habt.
Was genau heißt das: #box1 > div (also der Pfeil ">")?
Das habe ich noch nie gesehen und finde bei Google nicht wirklich was. Suche wahrscheinlich falsch.

VIELEN DANK für die Hilfe!
 
threadi schrieb:
In dem Fall würde ich glatt mal absolute Positionierung einsetzen.
HTML: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script>
<title>DIV soll nur zum Ende der Seite, nicht weiter!</title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#logo {
    height:40px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}
#box1 {
    background-color: #000;
    height:100%;
    width: 200px;
    float:left;
}
#box2 {
    background-color: #999;
    margin-left:200px;
    height: 100%;
    width: auto;
}

#box1 > div, #box2 > div { padding-top: 40px; }

</style>
</head>

<body>

<div id="logo"></div>
<div id="box1"><div></div></div>
<div id="box2"><div></div></div>

</body>
</html>
Zum Vergrößern anklicken....

Hey,

nutze diese Lösung und mir fällt da gerade etwas auf. Wenn der Inhalt länger als die box2 ist, schießt die unten heraus.
Ist es möglich, dass die DIV dynamisch zusammen größer werden? Ich kriege es nicht hin.

Hier noch ein Screenshot, damit ihr versteht was ich meine.
Unbenannt-2.jpg

Danke im Voraus!
 
Nein, ein absolut positioniertes Element kann sich nicht an die eigenen Inhalte in Höhe und Breite anpassen. Das müsstest Du ggfs. per JavaScript lösen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben