Header mit variabler Höhe

msommer · #1 (**permalink**) 23.07.2011, 23:19

Hey zusammen

Ich versuche gerade ein Layout auf die Beine zu stellen.
Das ganze sieht so aus

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>layout test</title>

<!-- CSS-Stylesheets -->  
<style type="text/css">
* {margin:0;padding:0;}

html ,body {
	height: 100%;
	width:100%;
	}
body {
	margin: 0 auto;
	background: #ffffff;
	text-align:left;
	}
#maintable, #maintable tr, #maintable td {
	height: 100%;
	border:0;
	margin:0 auto;
	}
#mainbox {
	margin:0 auto;
	background: #ff0000;
	padding: 20px;
	text-align:left;}

html{height:100%; overflow-y:scroll;}

body {
    background: #000;
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:top left;
    height:100%;
	font-family: "Courier New", "Courier", Courier, monospace;
	font-size: 12px;
  	color: #333;
  	padding: 0;
  	margin: 0;
	text-align: left;
}
#wrapper {
    width:450px;
    margin:0 80px 0 auto;
    background: #EEE;

    min-height:100%;
}
#header {
    position:fixed;
    z-index:3;
    width:450px;
    height:250px;
    text-align:center;
    background: #EEE;
}
#content {
    width:450px;
    padding:250px 0 100px 0;
}
#content-inner {
    width:450px;
}


#fixwrap{
    float:left;
    width:400px;
}
#fixed {
    position:fixed;
    z-index:2;
    width:400px;
    top:250px;
    bottom:100px;
	right: 530px;
    overflow:hidden;
	background:#0C0;
	background-repeat:no-repeat;
	background-position:left top;

}

/*=== footer positions from the viewport ===*/
#footer {
    position:fixed;
    z-index:3;
    bottom:0;
    width:100%;
    height:100px;
}
#innerfoot {
    height:100px; 
    width:450px;
    margin:0 80px 0 auto; 
    text-align:center;
    background: #EEE;
}

</style>
<!-- CSS-IE6 Hack -->  

<!--[if IE 6]>

<script type="text/javascript">
function fixedIE(tl, n){
var sc='scroll'+tl, d=document, c='compatMode';
return d[c] && d[c]=='CSS1Compat'? d.documentElement[sc]+n+'px' : d.body[sc]+n+'px';
}
</script>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />

<![endif]-->



</head>
<body>
<div id="wrapper">
    <div id="header">
    </div>
    
    <div id="content">
    	<div id="content-inner">
    	<p>first scrolling test text</p>
        <p>scrolling test text</p>

        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>

        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>

        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>

        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>

        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>

        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>scrolling test text</p>
        <p>last scrolling test text</p>
        </div>
   	</div>

</div><!--end wrapper-->

<div id="footer">
    <div id="innerfoot">
    </div>
</div>

    <div id="fixwrap">
        <div id="fixed">
        </div>
    </div>     
    <div id="faux"></div>
    <!--for ie6 only-->
</body>
</html>

Im grünen Bereich wird mal das Menü hinkommen. (Und es wird natürlich nicht grün bleiben =))

Nun hätte ich aber gerne, dass die mittlere Zeile in der Höhe fix bleibt, und sich der Header und der Footer (Oder nur der Header) anpassen, wenn ich das Browserfenster skaliere.

Gibt es da eine Möglichkeit, bei der gleichzeitig das Scrollen des Inhaltcontainers mit den "Hauptscrollbalken" gewährleistet ist?

Hab zig Versionen von CSS-Layouts gefunden, wo aber überall der Header und Footer mit fixer Höhe und der Content mit variabler Höhe programmiert sind... (Was ja auch in den meisten Fällen Sinn macht)

Danke schonmal für eure Hilfe

Gruss, marc

Praktikant · #2 (**permalink**) 24.07.2011, 19:22

Ein Link zu deinem Testcase wäre schön. Zusammensetzen wird das kaum einer hier.

msommer · #3 (**permalink**) 24.07.2011, 19:34

Danke für den Hinweis...

Hier der Link zum Testcase:

Testcase

Gruss,m

K.Roland · #4 (**permalink**) 25.07.2011, 16:23

Hallo,

so richtig verstanden habe ich es noch nicht.

Schau mal hier ob du das so meinst.

msommer · #5 (**permalink**) 25.07.2011, 17:03

Hallo

Was ich versuche ist: das weisse Feld, wo ja momentan der Inhalt schön mit der "Hauptscrollleiste" am rechten Rand des Browsers scrollbar ist, in der Höhe fixieren; auch wenn man das Browserfenster kleiner macht.

Jetzt ist es bei Deinem und meinem Beispiel so, dass der Header fix in der Höhe bleibt, der Footer auch, und nur die Inhaltbox verkleinert wird...

Ich frag mich aber langsam, ob das überhaupt realisierbar ist mit CSS...

Klar, man könnte einfach das Inhaltdiv scrollbar machen, aber dann wären die Scrollbalken mitten im Bild, was ich eben nicht möchte...

Irgendeine Ahnung ob das überhaupt möglich ist und wenn ja, wie?...

Danke und lieber Gruss

m

K.Roland · #6 (**permalink**) 25.07.2011, 20:25

Okay,

vieleicht Schau ich mir das Morgen noch mal an.
Jetzt keine nerven mehr dafür.

Gruß,
Roland

Karlo · #7 (**permalink**) 26.07.2011, 10:41

Hi,

falls ich das so richtig verstehe, brauchst du doch nur ein min-height bzw. für ältere IE's height der Content-Box mitgeben.
Ansonsten werd ich da nicht schlau draus was du da genau haben möchtest.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Sticky Header mit flexibler Höhe?	Kirladu	CSS	5	24.11.2010 07:27
Problem mit variabler Höhe	shredder01	CSS	28	22.04.2010 12:55
Problem bei Anordnung- footer nach div mit variabler Höhe	gombi	CSS	7	18.01.2010 18:14
Header, Footer, dazwischen 100% der restlichen Höhe	horstenpeter	CSS	3	01.10.2009 09:36
fester header und 100% höhe	riot	CSS	10	05.09.2008 06:29