✔ Hilfe bei Layout

Arndtinho · 14. November 2007

Hallo,

ich möchte ein Layout erstellen, wo es eine linke Spalte gibt und eine rechte. Die linke hat eine gewisse Breite und die rechte soll dann den Rest des Browserfensters ausfüllen. Beide Spalten sollen eine Mindesthöhe des Browserfensters haben.
So sieht mein CSS dazu aus:

Code:

body {
   margin:              0;
   padding:             0;
}

#layout_container {
   width:               auto;
   height:              auto;
}

#layout_left {
   float:                left;
   width:              165px;
   height:             auto;
   min-height:        100%;
}

#layout_right {
   margin-left:        165px;
   width:               100%;
   height:              auto;
   min-height:        100%;
}

und hier das entsprechende HTML:

HTML:

<div id="layout_container">
	
	<div id="layout_left">linke seite</div>
	
	<div id="layout_right">
		rechte seite
	</div>
</div>

Das Problem an der Sache ist, das im FF ein ein vertikaler Scrollbalken erscheint und in beiden Fällen aber die "min-height" nicht interpretiert wird. Was mache ich falsch bzw. habe ich nicht beachtet?

Viele Grüße
Arndtinho

Maik · 14. November 2007

Hi,

setz mal dieses Stylesheet ein:

Code:

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

#layout_container {
   width:               auto;
   height:              100%;
}

#layout_left {
   float:                left;
   width:              165px;
   min-height:       100%; /* Mindesthöhe in mordernen Browsern */
   height:             auto !important;  /* !important-Regel für morderne Browser */
   height:             100%;  /* Mindesthöhe in IE <7  */
   background:     #ccc; /* optional */
}

#layout_right {
   margin-left:        165px;
   min-height:       100%; /* Mindesthöhe in mordernen Browsern */
   height:             auto !important;  /* !important-Regel für morderne Browser */
   height:             100%;  /* Mindesthöhe in IE <7  */
   background:      #ddd; /* optional */
}

Arndtinho · 14. November 2007

Danke. Hab mal flink Strg+C und Strg+V gemacht und getestet. Es funktioniert. Nun schau ich mir den Code an. Bei Fragen melde ich mich wieder.

Viele Grüße
Arndtinho

Arndtinho · 14. November 2007

Hallo,

nachdem ich nun mit dem obigen Code ein paar Tests gemacht habe, versuche ich nun die ganze Geschichte auf ein 3-zeiliges-Layout umzustellen. Es soll einen Header (Breite: 20px), einen Contententbereich und einen Footer geben. Der Header und der Footer haben eine fixe Höhe, der Contentbereich ist variabel. Alles soll mindestens die Höhe des Browserfensters haben. Wenn der Content mehr wird, muß zwangsläufig gescrollt werden. Mit diesem CSS

Code:

html, body {
            height:     100%;
            width:      100%;
            margin:     0px;
            padding:    0px;
         }
         
         #wrapper {
            height:     100%;
         }
         
         #header {
            height:     20px;
            background: #ff0000;
         }
         
         #content {
            min-height: 100%;
            height:     auto;
            background: #000;
            color:      #fff;
         }
         
         #footer {
            height:     20px;
            background: #ff0000;
         }

und diesem HTML

HTML:

<div id="wrapper">
      <div id="header">
      </div>   
      
      <div id="content">
      </div>
   
      <div id="footer">
      </div>
   </div>

bekomme ich zwar alles angezeigt, aber ich muss bereits scrollen um den Footer sehen zu können. Oder kann man das nicht mit CSS darstellen?

Viele Grüße
Arndtinho

Maik · 14. November 2007

Selbstverständlich kann man das mit CSS umsetzen

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Arndtinho</title>

<style type="text/css">
<!--
html, body {
height:100%;
margin:0;
padding:0;
}

#wrapper {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
background:#000;
color:#fff;
}

#header {
height:20px;
background:#ff0000;
}

#content {
padding-bottom:20px;
}

#footer {
position:absolute;
bottom:0;
width:100%;
height:20px;
background:#ff0000;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="header">header</div>
     <div id="content">content</div>
     <div id="footer">footer</div>
</div>

</body>
</html>

Arndtinho · 14. November 2007

Aha. Danke.
Habe noch ein wenig rumgetestet, aber auf diese Lösung bin ich nicht gekommen.

Viele Grüße
Arndtinho

Arndtinho · 14. November 2007

So, ich doch noch mal. Nun war ich so wagemutig, und habe die beiden Lösungen miteinander verbunden. Im IE wirds korrekt angezeigt aber im FF nicht. Und da ich ein wenig skeptisch bin, denke ich, dass mir der IE etwas "vorgaukelt". Schön wäre es natürlich, dass der IE recht hat und es eine Lösung gibt, so dass auch der FF alles ordentlich darstellt.

Code:

html, body {
   margin:              0px;
   padding:             0px;
}

#layout_container {
   width:               100%;
   height:              100%;
}

#colLeft {
   float:               left;
   position:            relative;
   min-height:          100%;
   height:              auto !important;
   height:              100%;
   width:               165px;
   background:          #F3F4F5;
   border-right:        1px solid #008080;
}

#logo_colLeft {
   background:          #a9cfad;
}

#content_colLeft {
   background:          #fff;
}

#colRight {
   float:               right; 
   width:               auto;
   position:            relative;
   min-height:          100%;
   height:              auto !important;
   height:              100%;
   background:          #fff;
}

#content_colRight {
   background:          #fff;
}

#colFooter {
   width:               100%;
   position:            absolute;
   height:              20px;
   bottom:              0 !important;
   bottom:              -1px;
   background:          #a9cfad;
}

#colHeader {
   height:              20px;
   width:               100%;
   background:          #a9cfad;
}

und hier der HTML-Code dazu:

HTML:

<div id="layout_container">
	
	<div id="colLeft">
		<div id="logo_colLeft"></div>
		<div id="content_colLeft"></div>		
		<div id="colFooter"></div>
	</div>
	
	<div id="colRight">
		<div id="colHeader"></div>
		<div id="content_colRight"></div>
		<div id="colFooter"></div>
	</div>
</div>

Nun habe ich mir eine Lösung gebastelt, die zwar nicht die feine englische Art ist, aber funktioniert:

Code:

* html #colRight { 
   float: right; 
   margin-left:   0px; 
}

Viele Grüße
Arndtinho

✔ Hilfe bei Layout

Arndtinho

Erfahrenes Mitglied

Maik

Arndtinho

Erfahrenes Mitglied

Arndtinho

Erfahrenes Mitglied

Maik

Arndtinho

Erfahrenes Mitglied

Arndtinho

Erfahrenes Mitglied

Neue Beiträge