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

Layoutprobleme

C

chazzx

Guest
Hallo Leute,
bin neu hier also entschuldigt, wenn ich irgendwelhe Gepflogenheiten noch nicht kenne.
Also wie beschrieben habe ich ein Problem beim Layout:
Ich habe in meiner html-datei im body ein container - div indem alle weiteren divs drin sind. Nun möchte ich, dass alle divs im container 100% Höhe und Breite des Bildschirms haben. Das habe ich auch soweit hinbekommen wenn ich den Body sowie den container auf 100% Höhe und Breite eingestellt habe. Jedoch passiert es dann dass der Container Von oben bis unten auch 100% Höhe hat wie ich es ja auch in CSS geschrieben hab aber er hört nach den 100% dann auf und umfasst nicht mehr alle in ihm befindlichen Divs. Wie kriege ich es hin, dass die Divs im Container 100% Bildschirmhöhe und Breite haben der Container aber auch alle Divs umfasst??

Hier mein html-text:

<body>
<div class="container">
<div class="startpage"></div>
<div class="navbar"> </div>
<div class="news"></div>
<div class="music"></div>
<div class="photos"></div>
<div class="videos"></div>
<div class="live"></div>
<div class="footer"></div>
</div>
</body>

Hoffe, ihr könnt mir weiterhelfen :)
 
Werbung:
chazzx schrieb:
Hallo Leute,
bin neu hier also entschuldigt, wenn ich irgendwelhe Gepflogenheiten noch nicht kenne.
Also wie beschrieben habe ich ein Problem beim Layout:
Ich habe in meiner html-datei im body ein container - div indem alle weiteren divs drin sind. Nun möchte ich, dass alle divs im container 100% Höhe und Breite des Bildschirms haben. Das habe ich auch soweit hinbekommen wenn ich den Body sowie den container auf 100% Höhe und Breite eingestellt habe. Jedoch passiert es dann dass der Container Von oben bis unten auch 100% Höhe hat wie ich es ja auch in CSS geschrieben hab aber er hört nach den 100% dann auf und umfasst nicht mehr alle in ihm befindlichen Divs. Wie kriege ich es hin, dass die Divs im Container 100% Bildschirmhöhe und Breite haben der Container aber auch alle Divs umfasst??

Hier mein html-text:

<body>
<div class="container">
<div class="startpage"></div>
<div class="navbar"> </div>
<div class="news"></div>
<div class="music"></div>
<div class="photos"></div>
<div class="videos"></div>
<div class="live"></div>
<div class="footer"></div>
</div>
</body>

Hoffe, ihr könnt mir weiterhelfen :)
Zum Vergrößern anklicken....

Hallo!

.container { height: auto; }
 
danke, aber jetzt werden die divs innerhalb des containers nicht mehr 100% des fensters groß, eine idee?

hier auch mal mein css bisher:

html, body
{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
.container
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
float: left;
border: 1px solid yellow;
}

.startpage, .news, .music, .photos, .videos, .live
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
border: 1px solid red;
overflow: hidden;
}

.navbar
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
padding: 0px;
margin: 0px;
border: 1px solid blue;
overflow: hidden;
}
 
Werbung:
chazzx schrieb:
danke, aber jetzt werden die divs innerhalb des containers nicht mehr 100% des fensters groß, eine idee?

hier auch mal mein css bisher:

html, body
{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
.container
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
float: left;
border: 1px solid yellow;
}

.startpage, .news, .music, .photos, .videos, .live
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
border: 1px solid red;
overflow: hidden;
}

.navbar
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
padding: 0px;
margin: 0px;
border: 1px solid blue;
overflow: hidden;
}
Zum Vergrößern anklicken....

Das relative weg?
 
Ich denke, das kann nicht funktionieren. Die 100% der inneren Divs richten sich nach dem Container. Der wiederum soll automatisch die die Höhe seiner Kinder erhalten. Ein Zirkelschluss.
Setz die Höhe des Containers mit Javascript, ist ein Einzeiler.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben