✔ Design im IE lauffähig machen

Status
Nicht offen für weitere Antworten.
C

chris91

Content-Box auf 100% Höhe

Hi

Ich bastle gerade an einem Design. Das erste Problem war, dass der "container"-DIV eine Höhe von 100% haben sollte, aber unten noch ein Footer hinpassen sollte, ohne dass der Benutzer scrollen muss. Das habe ich mit der footerStickAlt-Methode gelöst. Der Container (rot) hat 100% Breite und 100% Höhe und der Footer hat einen negativen margin-top Wert. (Also der "container"-div geht unter dem Footer weiter und der Footer liegt nur darüber.)

Das nächste Problem: Die Content-box "#content-container" (gelb) soll ebenfalls die Höhe 100% ausnutzen.

1) Wie mache ich es, dass die der "content-container" den kompletten Raum bis zum Footer ausnutzt?

2) Der "content-container" würde dann aber unter dem Footer durchgehen (siehe fettgedruckte Klammer oben). Wie erstelle ich dann eine leere DIV-Box unten im "content-container", der den Platz unter dem Footer füllt? (Damit ich darüber einen weiteren Container hinsetzen kann, der dann den freien Raum nur bis zum Footer nutzt).

Der Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>100%-Höhe Layout mit Header und Footer 2 (footerStickAlt)</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	
	<body>
		<div id="container">
			<div id="head">#head</div>
			<div id="left-col">#left-col</div>
			<div id="content-container">
				#content-container <br><br>
			</div>
			<div id="right-col">#right-col</div>
		</div>
		<div id="foot">#foot</div>
	</body>
</html>

HTML: 
*
{ 
	margin:0; 
	padding:0; 
} 
  
html, body
{ 
	height:100%; 
} 
  
#container
{
	background-color: red;
	min-height:100%; 
} 
  
/* für Win IE < 7 */ 
* html #container
{ 
	height:100%; 
} 

#head
{
	background-color: gray;
	height: 100px;
}

#left-col
{
	background-color: blue;
	width:15%;
	float:left;
}

#content-container
{
	background-color: yellow;
	width:70%;
	float:left;
}

#right-col
{
	background-color: orange;
	width:15%;
	float:right;
}
  
#foot {
	background-color: green;
	height:3em; 
	margin-top:-3em; 
}

Farben:
#container: rot
#head: grau
#left-col: blau
#content-container: gelb
#right-col: orange
#foot: grün

EDIT:
Hab mir diesen thread schon angeschaut. Da wird nur der Hintergrund erweitert, sodass es aussieht, dass die Spalten 100% Höhe haben. In meinem Fall geht das nicht, weil ich in der Content-Box einen iframe brauche, der die gesamte fläche belegt.
 

Anhänge

  • screen.jpg
    screen.jpg
    10 KB · Aufrufe: 50
Zuletzt bearbeitet von einem Moderator:
Hi

Ich habe für mein Design (voriger Post) eine andere Lösung gefunden. Das ganze funktioniert aber natürlich wieder nicht im IE. Wie muss ich es anpassen, sodass es der IE auch korrekt anzeigt?

HTML: 
<html> 
     <head> 
          <title>100%-Höhe Layout mit Header und Footer 2 (footerStickAlt)</title> 
          <style type="text/css" media="screen">
                * 
                        {  
                             margin:0;  
                             padding:0;  
                        }  
 
                        html, body 
                        {  
                             height:100%;  
                        }  
 
                        #container 
                        { 
                             background-color: red; 
                             top: 100px;
                                 bottom: 3em;
                        }  
 
                        #head 
                        { 
                             background-color: gray; 
                             height: 100px;
                             top: 0;
                             position: absolute;
                             width: 100%;
                        } 
 
                        #left-col 
                        { 
                             background-color: blue; 
                             width:200px;  
                             position: absolute;
                             right: 0;
                             top: 100px;
                             bottom: 3em;
                        } 
 
                        #content 
                        { 
                             background-color: yellow; 
                             position: absolute;
                             left: 200px;
                             right: 200px;
                             top: 100px;
                             bottom: 3em;
                        } 
 
                        #right-col 
                        { 
                             background-color: orange; 
                             width:200px;
                             position: absolute;
                             left: 0;
                             top: 100px;
                             bottom: 3em;
                        } 
 
                        #foot { 
                             background-color: green; 
                             height:3em;  
                             bottom: 0;
                             position: absolute;
                             width: 100%;
                        }
          </style>
          
     </head> 
      
     <body> 
               <div id="head">#head</div> 
                                <div id="container">
                        <div id="left-col">#left-col</div> 
                        <div id="content"> #content <br><br> </div>
                        <div id="right-col">#right-col</div> 
                                </div> 
                        <div id="foot">#foot</div> 
     </body>
<html>

Im Anhang sind Screenshots davon im Firefox und im IE.
 

Anhänge

  • Firefox.jpg
    Firefox.jpg
    10,9 KB · Aufrufe: 20
  • IExplorer.jpg
    IExplorer.jpg
    10,7 KB · Aufrufe: 19
Hi,

dann hast du das von mir empfohlene CSS-Tutorial wohl nicht zu Ende gelesen, denn darin werden doch zwei Techniken für den IE vorgestellt.

Ich greif hier mal die zweite Variante (ohne JavaScript) auf:

Code: 
<html>
     <head>
          <title>100%-Höhe Layout mit Header und Footer 2 (footerStickAlt)</title>
          <style type="text/css" media="screen">
                *
                        {
                        margin:0;
                        padding:0;
                        }

                        html, body
                        {
                        height:100%;
                        }

                        #container
                        {
                        background-color: red;
                        top: 100px;
                        bottom: 3em;
                        }

                        #head
                        {
                        background-color: gray;
                        height: 100px;
                        top: 0;
                        position: absolute;
                        width: 100%;
                        z-index:5;
                        }

                        #left-col
                        {
                        background-color: orange;
                        width:200px;
                        position: absolute;
                        left: 0;
                        top: 100px;
                        bottom: 3em;
                        z-index:2;
                        }

                        * html #left-col {
                        position:absolute;
                        left:0;
                        top:0;
                        height:100%;
                        border-top:100px solid #fff;
                        border-bottom:3em solid #fff;
                        }

                        #content
                        {
                        background-color: yellow;
                        position: absolute;
                        left: 200px;
                        right: 200px;
                        top: 100px;
                        bottom: 3em;
                        z-index:1;
                        }

                        * html #content {
                        position:absolute;
                        left:0;
                        top:0;
                        width:100%;
                        height:100%;
                        border-left:200px solid #fff;
                        border-right:200px solid #fff;
                        border-top:100px solid #fff;
                        border-bottom:3em solid #fff;
                        }

                        #right-col
                        {
                        background-color: blue;
                        width:200px;
                        position: absolute;
                        right: 0;
                        top: 100px;
                        bottom: 3em;
                        z-index:2;
                        }

                        * html #right-col {
                        position:absolute;
                        right:0;
                        top:0;
                        height:100%;
                        border-top:100px solid #fff;
                        border-bottom:3em solid #fff;
                        }

                        #foot {
                        background-color: green;
                        height:3em;
                        bottom: 0;
                        position: absolute;
                        width: 100%;
                        z-index:5;
                        }
          </style>

     </head>

     <body>
               <div id="head">#head</div>
                                <div id="container">
                        <div id="left-col">#left-col</div>
                        <div id="content"> #content <br><br> </div>
                        <div id="right-col">#right-col</div>
                                </div>
                        <div id="foot">#foot</div>
     </body>
<html>
 
Vielen dank, den Star Html Hack hab ich übersehen.

Nur eine Frage: Du wendest den Hack an, um die Abstände über die border-Eigenschaft festzulegen. Funktioniert die border-Methode nicht auch beim Firefox (dann müsste man den Hack nicht anwenden)?
 
Hi,

die Methode funktioniert nicht im Firefox und den übrigen modernen Browsern, da sie das Boxmodell weiterhin im "Quirksmodus" unterstützen, sprich die border-Deklarationen zur Breiten- und Höhenangaben hinzuaddieren, und sich somit die Boxen in der Horizontalen bzw. Vertikalen vergrößern würden.

Einfach mal ausprobieren ;)
 
danke nochmal, hab deinen beitrag mal bewertet. ich denke das wäre dann erledigt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück