Durchgehender vertikaler Balken @ tutorials.de: Tutorials, Forum & Hilfe

Darian · 22.02.11 21:05

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

**Quaese** · 23.02.11 00:16

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

Frezl · 23.02.11 00:42

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

Darian · 23.02.11 22:58

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

**Quaese** · 24.02.11 09:13

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

Darian · 27.02.11 14:16

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

spicelab · 27.02.11 14:31

Code 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 */
...
}

Darian · 27.02.11 14:43

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

**Quaese** · 27.02.11 22:54

Hi,

wenn du die Höhenangaben

Code :

1
2
3

height: auto !important;
height:100%;
min-height:100%;

aus der CSS-Deklaration zu #bar raus nimmst, sollte die Höhenanpassung über

Code :

1	$('#bar').height($(document).height());

funktionieren.

@spicelab:
Ist die korrekte Reihenfolge tatsächlich:

Code :

1
2

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 :

1	height: 100%;

wieder ausser Kraft gesetzt werden soll, da dort die Höhe dynamisch angepasst wird, falls der Platz nicht ausreicht.

Ciao
Quaese

Darian · 28.02.11 19:48

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Vertikaler Newsticker

Durchgehender header (im browser von links nach rechts)

Durchgehender Copyright Texteffekt wie im Beispiel?

Vertikaler Text

Vertikaler Newsticker...!

E-Mail:

Abonnieren Abbestellen