zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Header mit variabler Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.07.2011, 23:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.07.2011
Beiträge: 3
msommer befindet sich auf einem aufstrebenden Ast
Frage Header mit variabler Höhe

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.07.2011, 19:22
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.990
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ein Link zu deinem Testcase wäre schön. Zusammensetzen wird das kaum einer hier.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.07.2011, 19:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.07.2011
Beiträge: 3
msommer befindet sich auf einem aufstrebenden Ast
Standard Link zum testcase

Danke für den Hinweis...

Hier der Link zum Testcase:

Testcase

Gruss,m
Mit Zitat antworten
  #4 (permalink)  
Alt 25.07.2011, 16:23
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo,

so richtig verstanden habe ich es noch nicht.

Schau mal hier ob du das so meinst.
Mit Zitat antworten
  #5 (permalink)  
Alt 25.07.2011, 17:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.07.2011
Beiträge: 3
msommer befindet sich auf einem aufstrebenden Ast
Standard Nicht genau..

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
Mit Zitat antworten
  #6 (permalink)  
Alt 25.07.2011, 20:25
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Okay,

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

Gruß,
Roland
Mit Zitat antworten
  #7 (permalink)  
Alt 26.07.2011, 10:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.07.2003
Beiträge: 179
Karlo wird schon bald berühmt werden
Standard

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.
__________________
Gruss Karlo
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:44 Uhr.