✔ Scrollbarer Bereich mit 100% minus 100px

Status
Nicht offen für weitere Antworten.
W

windmill

Grünschnabel
Hallo,

es geht um mein Layout, welches xhtml konform sein soll. Ich probiere schon ewig an dem Entwurf aber so wirklich klappt es doch nie.

Ich habe einen Header, der 100px groß ist. Darunter soll ein Menü, welches einen Scrollbalken hat. Das Menü geht vom Header runter bis an den Boden. Es wären diese 100% Fensterhöhe minus 100px vom Header.

Mein Problem ist jetzt, dass ich das Menü nie auf die gewünschte Größe bringe. Da bei mir ja die 100px dazukommen.

Ich habe schon versucht alles in eine Tabelle zu machen und dann zwei Zeilen wobei die untere Zeile die Tabelle ausfüllen soll. Wegen dem xhtml geht das aber nicht. Ausserdem will ich Tabellen vermeiden. Ebenso Frames.

Ein div mit margin und padding und position und bottom will auch nicht funktionieren.

Langsam nervt mich das Thema. Ich hoffe ihr könnt mir bei meinem Problem helfen.

Anscheinend würde es mit Javascript gehen. Das ist allerdings nicht meine Spezialität und css wäre mir dann doch lieber. Wenn es aber anders nicht geht, bin ich auch froh, wenn ihr mir im javascript behilflich sein könnt.

Grüße und vielen Dank
 

Anhänge

  • 26571attachment.jpg
    26571attachment.jpg
    3 KB · Aufrufe: 956
absolutes div springt nur alle 2 pixel

Hallo,

danke für deine Antwort. Genau so habe ich mein Problem gelöst.

Allerdings stellt sich mir jetzt ein weiteres Problem. Und zwar habe ich ein Div welches absolut und bottom:0 ausgerichtet ist.

Im Firefox funktioniert es einwandfrei. Jedoch im IE hängt es ein wenig.

Wenn ich die Fenstergröße verändere dann springt das Div nicht sofort zum bottom. Erst wenn das Fenster um 2 Pixel vergrößert oder verkleinert wird, springt das Div an den unteren Rand des Fensters.

Alle meine Ansätze waren erfolglos. Bis auf der Versuch mit einer Tabelle. Hier habe ich ein 100% td das bottom ausgerichtet ist. Darin befindet sich das Div. Mit der Methode würde es funktionieren, aber ich will Tabellen meiden.

Ich hoffe ihr könnt mir bei meinem Problem helfen. Danke im Vorraus :)

HTML: 
<div style="position:absolute; bottom:0px; height:18px; background-color:gold;">
	bottom
</div>
 
Hallo windmill,
bei dem mitgelieferten knappen Code-Schnipsel kann man sich kaum ein Bild über die mögliche Ursache machen. Am besten du zeigst mal das HTML-Gerüst deines Layouts einschließlich der Dokumentyp-Deklaration.
 
hallo hela,

eigentlich geht es ja nur um den Schnipsel, den ich gepostet habe. Denn auch wenn er alleine im Dokument steht gibts einen Fehler.

Da wollte ich nun wissen, ob das nun eine Macke vom IE ist, die so nicht behoben werden kann oder ob es eine gute Alternative dazu gibt.

Ich habe aber noch den ganzen Code eingefügt. So kannst du dir einen besseren Überblick verschaffen.

Grüße

HTML: 
<!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" lang="en" xml:lang="en" style="overflow:hidden;">

<head>
</head>

<body style="margin:0px; padding:0px; height:100%">


<div style="height:70px; background-color:coral">
	Header
</div>	
	
<div style="position:absolute; top:70px; bottom:30px; right:0px; left:0px; 
	background-color:#cccccc; overflow-y:auto;
	width:expression((document.body.clientWidth) + 'px');
	height:expression((document.body.clientHeight - 100) + 'px')">
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>

</div>
				
<div style="position:absolute; bottom:0px; width:100%; height:30px; background-color:gold;">
	<i>Footer</i>
</div>
		

</body>

</html>
 
Vielleicht hilft es weiter, wenn Du folgendes Stylesheet auf das Dokument anwendest:

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" lang="en" xml:lang="en" style="overflow:hidden;">
<head>
<title></title>

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

<body>


<div style="height:70px; background-color:coral">
        Header
</div>

<div style="position:absolute; top:70px; bottom:30px; right:0px; left:0px;
        background-color:#cccccc; overflow-y:auto;
        width:expression((document.body.clientWidth) + 'px');
        height:expression((document.body.clientHeight - 100) + 'px')">
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>

</div>

<div style="position:absolute; bottom:0px; width:100%; height:30px; background-color:gold;">
        <i>Footer</i>
</div>


</body>

</html>
 
Hi Michael,

auch wenn ich die Styles vorher deklariere will er mir das div nicht ganz an den bottom ziehen.

Ich habe nochmal das CSS Tutorial "Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken" angeschaut, aber selbst dort taucht der Fehler auf.

Grüße
 
windmill hat gesagt.:
..., aber selbst dort taucht der Fehler auf.
Zum Vergrößern anklicken....
Das ist kein "richtiger" Fehler: Durch die Expression-Ausdrücke rechnet der IE ständig die BODY-Größe aus und positioniert dann den Footer. Durch Rundungsfehler kann es passieren, dass dabei 1px-Differenzen entstehen.

Den gleichen Effekt erhält man übrigens, wenn das Fenster in der Breite verändert wird und wenn die Content-Blockbreite über den Expression-Ausdruck berechnet wird. Leider muss man damit leben.;-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück