Bernd Huber: Position: fixed scrollen

SELF-Forum

Position: fixed scrollen

Bernd Huber
– Informationen zu den Bewertungsregeln

Hi,
folgender Html-Code zeigt den Grundaufbau meiner Seite. Oben befindet sich der div-Container "menu", der das Menü beinhaltet und insgesamt eine Höhe von 99px einnimmt. Darunter befinden sich zwei weitere div-Container "nbar" und "fxt" die nebeneinander angeordnet sind. Unabhängig von dem Inhalt dieser beiden div Container sollen sie stets bis zum Ende des Browserfensters gehen.
Das funktioniert auch, solange der Inhalt dieser div Container nicht mehr als die zur Verfügung stehende Höhe einnehmen.

  
* {margin: 0;padding: 0;border: 0px;}  
body {  
    font-size: 14px;  
    font-family:Tahoma;  
    width:100%;  
    height:100%;  
}  
#wrapper									  
{  
    min-height: 100%;  
	height:auto !important;  
	height:100%;  
	overflow: hidden !important;  
	position:relative;  
    background:#fff;  
}  
.menu {  
    height:99px;  
    width:100%;  
    background:#eee;  
}  
#content {  
    width:100%;  
    height:100%;  
    position:fixed;  
    top:119px;  
    left:0px;  
    overflow-x:auto;  
}  
#nbar {float:left;height:100%;}  
#nb_open {  
	width:50px;  
    border: 1px solid #878787;  
    border-left-width: 0px;  
    background: #dcdcdc;  
    height: 100%;  
}  
#fxt {  
    display:block;  
    margin-left:70px;  
    margin-right:20px;  
    height:100%;  
    background:#aaa;  
}  
.fxtc {padding-bottom: 20px;}  


  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
    <title>testpage</title>  
    <link href="test.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
    <div id="wrapper">  
        <div class="menu">  
        </div>  
        <div id="content">  
            <div id="nbar">  
                <div id="nb_open"></div>  
            </div>  
            <div id="fxt">  
                <div class="fxtc"></div>  
                <div class="fxtc" style="background:#ddd; height:1000px;"></div>  
            </div>  
        </div>  
    </div>  
</body>  
</html>

Reicht die Fenstergröße (Browser) nicht aus, um den kompletten Inhalt des "content" div Containers darzustellen, soll eine Scrollleiste beim "content" div Container erscheinen. Diese taucht auch auf. Allerdings ist es durch die Scrollleiste nicht möglich, den kompletten Inhalt des "content" div Containers zu sehen. Man sieht u.a. auch das untere Ende der Scrollbar nicht. Wie kann man das beheben? Ich denke, dass das mit der CSS-Angabe "position:fixed;" beim "content" div Container zusammenhängt.

Des Weiteren wäre es super, wenn beide div Container "nbar" und "fxt" immer - auch wenn eine Scrollleiste benötigt wird - bis zum Ende der HTML-Seite reichen würden; also bis zum unteren "Scrollpunkt". Im obigen HTML-Code ist es momentan so, dass die "nbar" leider nicht an die Höhe des "fxt" div Containers angepasst wird.

Gruß
Bernd

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Position: fixed scrollen

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    #content {
        width:100%;
        height:100%;
        position:fixed;
        top:119px;
        left:0px;
        overflow-x:auto;
    }

    Reicht die Fenstergröße (Browser) nicht aus, um den kompletten Inhalt des "content" div Containers darzustellen, soll eine Scrollleiste beim "content" div Container erscheinen. Diese taucht auch auf. Allerdings ist es durch die Scrollleiste nicht möglich, den kompletten Inhalt des "content" div Containers zu sehen. Man sieht u.a. auch das untere Ende der Scrollbar nicht.

    Und das wundert Dich?
    Dein Element soll so groß sein wie der Viewport (width:100%; height:100%;), und wird dann aber per position:fixed; top:119px; um 119px nach unten verschoben - da ist doch klar, daß die unteren 119px des Elements unterhalb des viewports liegen.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Position: fixed scrollen

      Bernd Huber
      – Informationen zu den Bewertungsregeln

      Und das wundert Dich?
      Dein Element soll so groß sein wie der Viewport (width:100%; height:100%;), und wird dann aber per position:fixed; top:119px; um 119px nach unten verschoben - da ist doch klar, daß die unteren 119px des Elements unterhalb des viewports liegen.

      Vom Prinzip her habe ich mir das schon gedacht, nur mit Position:relative oder absolute komm ich auch nicht zum gewünschten Ergebnis. In beiden Fällen wird die Höhe der div Container "fxt" und "nbar" über deren Inhalt bestimmt und gehen nicht per default bis zum unteren Viewport.

      Ist das nur über Javascript zu lösen oder gibt es hierzu auch eine Lösung per CSS? Bzw. was müsste ich bei meinem Vorhaben per Javascript lösen?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Position: fixed scrollen

        Bernd Huber
        – Informationen zu den Bewertungsregeln

        hab jetzt das CSS ohne position:fixed und der div Container "content" verhält sich schon einmal wie gewünscht. Aber der div Container "nbar" geht leider noch nicht bis zum unteren Scrollrand, wenn der div Container "fxt" eine Scrollleiste benötigt.

          
* {margin: 0;padding: 0; border: 0px;}  
body {  
    font-size: 14px;  
    font-family:Tahoma;  
    width:100%;  
    height:100%;  
}  
#wrapper									  
{  
    position:absolute;  
    top:0px;  
    left:0px;  
    width:100%;  
    height:100%;  
    background:#fff;  
}  
  
  
.menu  
{  
	position:absolute;  
	top: 0px;  
	left: 0px;  
	height:99px;  
	width:100%;  
	background:#aaa;  
}  
  
#content  
{  
	position:absolute;  
	top:109px;  
	left:0px;  
	bottom:0px;  
	width:100%;  
	background:#dcdcdc;  
	overflow:auto;  
}  
  
#nbar  
{  
	float:left;  
	height:100%;  
}  
  
#nb_open  
{  
	width:50px;  
	border:1px solid black;	  
	position:relative;  
	top:0px;  
	left:0px;  
	height:100%;  
}  
  
#fxt  
{  
	margin-left:70px;  
	min-height:100%;  
	background:#aaa;  
	border:1px solid black;  
}
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln