✔ Höhe 100% klappt im IE nicht

Status
Nicht offen für weitere Antworten.
aTa

aTa

Erfahrenes Mitglied
Hallo folgendes Problem im Mozilla zeigt er mir es wunderbar an aber im IE leider nicht. Ich verstehe es leider nicht...

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: #acacac;
}

div#center {
width: 700px;
margin: 0 auto;
min-height: 100%;
background: url(images/navi.png) repeat-y;
}

div#head {
min-height: 100%;
height: 130px;
background: url(images/head.jpg);
}
div#nav {
float:left;
min-height: 100%;
width: 160px;
}

div#content {
float:right;
min-height: 100%;
width: 520px;
}

div.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}
</style>

<!--[if IE]>
        <style type="text/css">
                div#center {height: 100%;}
				div#nav {height: 100%;}
                div#content {height: 100%;}
                
        </style>
<![endif]-->

</head>
<body>

<div id="center">
     <div id="head"></div>
     <div id="nav">navi</div>

     <div id="content">content</div>

 
<div>

</body>
</html>
 
Hi,

falls du den vertikalen Scrollbalken im IE meinst, versuch es mal hiermit:

Code: 
div#head {
height: 130px;
background: url(images/head.jpg);
}

div#nav {
float:left;
width: 160px;
}

div#content {
float:right;
width: 520px;
}
Code: 
<!--[if IE]>
        <style type="text/css">
                div#center {height: 100%;}
        </style>
<![endif]-->
 
nun tut es aber nun fängt der Navibereich ganz oben an und eben nicht unter dem Headbereich...
 
Zuletzt bearbeitet:
Hi,

das kann ich bei mir nicht nachvollziehen, denn der Header ist mit einer Höhe von 130px deklariert und darunter beginnt die Navigation.
 
hmm nun klappt es irgendwie hab ich evtl n float oder sowas gelöscht.
Danke!!
 
Das nächste Problem was ich nun habe ist, dass er den Contentbereich nicht 100% macht sondern nur so groß wie der Inhalt aber ich weiss net wieso...
 
Der Trick in dem Modell liegt darin, dass schon das DIV center die 100%-Höhe besitzt. ;)

Teste einfach mal das hier:

Code: 
div#center {
width: 700px;
margin: 0 auto;
min-height: 100%;
background: red url(images/navi.png) repeat-y;
border-left:1px solid #000;
border-right:1px solid #000;
}

div#head {
height: 130px;
background: yellow url(images/head.jpg);
}
Demnach müsstest du lediglich die Hintergrundgrafik "navi.png" entsprechend erweitern, damit sie auch den Hintergrund für den Inhalt besitzt.
 
Danke!
Nun taucht aber das nächste Problem auf und zwar soll der Contentbereich erst bei 170px anfangen, also zwischen Navi und Content soll noch ein grauer Balken mit 100% sein. Aber mit padding klaptt das irgendwie nicht, wieso nicht?=
 
Hi,

wie lautet denn der aktuelle Quellcode der Seite, und gibt es evtl. eine Online-Version, um mal das Layout mit den eingebundenen Grafiken betrachten und sich so einen Überblick von den Gegebenheiten verschaffen zu können?

Ausgehend von deinem eingangs gezeigten Quellcode müsstest du die Breite für das DIV #content von 520 auf 530px erhöhen, damit sich der linke Abstand von 180 auf 170px verringert, und den "grauen Balken" ebenfalls in die Hintergrundgrafik für das DIV #center "einarbeiten".
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück