✔ Durchgehender vertikaler Balken

D

Darian

Erfahrenes Mitglied
Hallo Leute,

habe mich gerade gefragt welche Lösungen es jetzt mit html5 und css3 gibt um eine box durchgehend zu machen.

Wenn ich zum Beispiel meine JS Konsole oder sowas offen habe, ist ein balken nie durchgehend.

Habe Sachen wie height:100%, und bottom und top:0px probiert.

Eventuell gibt es ja mit dem event scroll() von jquery eine brauchbare Lösung. Nur bis jetzt ist die Box gerade bei Smartphones nicht zu 100% durchgehend.

Bin mir sicher dass es da eine ganz simple Lösung gibt.

Würde mich über Infos freuen.

thx und lg
Darian
 
Hi,

was meinst du mit "durchgehend"? Und was mit einer "box"?

Falls du ein Element über die komplette Höhe des Viewports strecken möchtest, funktioniert das wie gewohnt.
Code: 
<!doctype html>
<html>
<head>
<title>www.tutorials.de</title>
<meta charset="iso-8859-1">
<style type="text/css">
  <!--
*{
  margin: 0;
  padding: 0;
}
body, html{
  height: 100%;
}

header, nav, section, footer{
  display: block;
}

section{
  height: auto !important;
  height: 100%;
  min-height: 100%;
  background-color: yellowgreen;
}
 //-->
</style>
</head>
<body>
<section>
  Inhalt
</section>
</body>
</html>
Ciao
Quaese
 
Hey Darian,

ich hab bis jetzt meist schlechte Erfahrungen mit height:100% gemacht. Das interpretiert jeder Browser wie er will und manche gar nicht. Ein Trick funktioniert aber immer: Es ist egal, wie hoch deine Boxen in Wirklichkeit sind, es zählt nur, dass sie 100% hoch aussehen. Und das kriegst du hin, indem du dem Body bzw. dem entsprechenden Elternelement den passenden Hintergrund gibst ;-)

Viele Grüße,
Frezl
 
Hallo Leute und danke für die Infos.

Hintergrund klingt gut, Problem ist nur dass der Balken mit jquery animiert wird. (bewegt sich von der Mitte nach Links)

Und jap, ich meinte ein Element über die komplette Höhe des Viewports. Handelt sich um ein div.

Habe jetzt auch die Methode mit dem height von Quaese probiert, was leider auch nicht ganz funktioniert.

Wenn ich jetzt zum Beispiel Firebug offen habe, und somit herum scrolle, ist der Balken nicht bis unten. Er ist zwar so hoch wie das ursprüngliche Fenster, nach dem Scrollen aber nicht mehr.

Ich hoffe ihr wisst ungefähr was ich meine und würde mich sehr über weitere Infos freuen.

thx und lg
Darian
 
Hi,

wenn ohnehin jQuery zum Einsatz kommt, könntest du damit nach dem Laden des Dokuments das gewünschte Element auf Dokumenthöhe strecken.

Beispiel:
Code: 
<!doctype html>
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta charset="iso-8859-1">
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  $('#secId').height($(document).height());
});
 //-->
</script>
<style type="text/css">
  <!--
*{
  margin: 0;
  padding: 0;
}
body, html{
  height: 100%;
}

section{
  display: block;
  float: left;
  width: 50px;
  margin-left: 50%;
  background-color: yellowgreen;
}

.aDiv{
  height: 1200px;
}
 //-->
</style>
</head>
<body>
<section id="secId">
  Inhalt
</section>
<div class="aDiv">aDiv</div>
</body>
</html>
Ciao
Quaese
 
Hallo,

tja, das habe ich jetzt auch noch eingebaut:

Code: 
$(document).ready(function() {
	
	onResize();
	initMenuFunctions();
	
	$('#bar').height($(document).height());
	
	//only for testing
	//goToMenu();
	
});

Mein CSS:

Code: 
#bar {
position:absolute;
height: auto !important;
height:100%;
min-height:100%;
display:block;
top:0px;
bottom:0px;
/*height:1000px;*/
background-color:#FFFFFF;
/*background-image:url(../img/bar.png);
background-repeat:repeat-y;*/
width:140px;
margin-left:-70px;
}

Und ich habe noch ein Bild angehängt, um zu zeigen was mit der Höhe passiert sobald ich ein kleineres Fenster habe (und somit rechts Skrollen kann)

Also mit CSS, HTML und JQuery bin ich da noch immer nicht weiter gekommen. Vermutlich übersehe ich nur eine Kleinigkeit******

thx und lg
Darian
 

Anhänge

  • fehler.jpg
    fehler.jpg
    29,4 KB · Aufrufe: 41
CSS: 
#bar {
position:fixed; /* fixierte Positionierung */

/* Reihenfolge zur Mindesthöhenregelung in Browsern */
height:100%;  /* "Mindesthöhenregel" für IE6, der min-height nicht interpretiert */
height:auto !important; /* autom. Höhe mit !important-Deklaration zum Überschreiben der height:100%-Regel zuvor für standardkonforme Browser */
min-height:100%; /* Mindesthöhe standardkonforme Browser */
...
}
 
Zuletzt bearbeitet:
Ah okay, mit fixed sieht sie Sache schon anders aus, der Inhalt des Balkens ist zwar dann auch fixiert, aber damit kann man ja leben.

thx und lg
Darian
 
Hi,

wenn du die Höhenangaben
Code: 
height: auto !important;
height:100%;
min-height:100%;
aus der CSS-Deklaration zu #bar raus nimmst, sollte die Höhenanpassung über
Code: 
$('#bar').height($(document).height());
funktionieren.


@spicelab:
Ist die korrekte Reihenfolge tatsächlich:
Code: 
height:100%;  /* "Mindesthöhenregel" für IE6, der min-height nicht interpretiert */
height:auto !important; /* autom. Höhe mit !important-Deklaration zum Überschreiben der height:100%-Regel zuvor für standardkonforme Browser */
Ich dachte bisher, dass die Reihenfolge umgekehrt ist und die important-Regel bei IEs < 7 durch die Definition
Code: 
height: 100%;
wieder ausser Kraft gesetzt werden soll, da dort die Höhe dynamisch angepasst wird, falls der Platz nicht ausreicht.

Ciao
Quaese
 
Ich habe das ohne den css Zeugs noch getestet, dann ist es leider irgendwie zu weit nach unten, habe daher wieder die CSS Methode genommen.

thx und lg
Darian
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück