1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

div bis zum unteren Rand des Browserfenster

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von wapplegraph, 01.03.08.

  1. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo

    Ich arbeite gerade an einer neuen Webseite und habe nun eine Frage/ein Problem:


    Code:
    <div id="wrapper_top">
    	<div id="verlauf_top"></div>
    </div>
    
    <div id="balken_h">
    	<div id="bilder_top">
    		<div id="galerie"></div>
    		<div id="einzel_bild"></div>
    	</div>
    </div>
    
    <div id="wrapper">
    	<div id="wrapper_left">
    		<div id="navigation">
    		</div>
    		<div id="content">
    			Hier kommt der Inhalt.
    		</div>
    	</div>
    	
    	[COLOR="Red"]<div id="balken_v">
    	</div>[/COLOR]
    </div>
    
    HTML-Quelltext

    Ich möchte, dass das div #balken_v einfach immer bis an den unteren Rand vom Browserfenster geht.

    Code:
    div#balken_v
    		{
    		width:200px;
    		height:5000px;
    		overflow:hidden;
    		
    		background-color:#3ca2f9;
    		
    		border-left:#000000 solid 2px;
    		border-right:#000000 solid 2px;
    		}
    CSS; hier wäre das ganze Stylesheet.

    Ich habe mir gedacht, ich gebe dem div eine sehr grosse Höhe und lasse es irgendwie mit overflow abschneiden, doch dies klappt nicht.

    Hat mir jemand einen Tipp?

    Merci wapplegraph
     
  2. janka

    janka Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    23.05.06
    Beiträge:
    244
    div#balken_v{
    height: 100%;
    }
     
  3. tehshin

    tehshin Ribston Pepping

    Dabei seit:
    26.08.05
    Beiträge:
    297
    damit das funktioniert muss aber auch folgendes gegeben sein:

    Code:
    html, body {
    height: 100%;
    }
    ich glaube aber das problem bei dieser methode ist, wenn jetzt der Inhalt eines anderen Element dazu führt das man scrollen muss, wird das Element mit dem Height:100% nicht über die Browser Höhe hinausgezeichnet.

    Eine andere methode wäre natürlich das ganze über JavaScript zu machen.
     
  4. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Ist ist der Balken aber so viel zu hoch, wie er einen Abstand vom oberen Browserrand hat.
     
    #4 wapplegraph, 01.03.08
    Zuletzt bearbeitet: 01.03.08
  5. janka

    janka Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    23.05.06
    Beiträge:
    244
    Bin jetzt nicht sicher, ob ich dich richtig verstanden habe, aber wenn du dem anderen Element ebenfalls eine Höhe von 100% gibst, gibts kein Problem.
     
  6. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo

    Also wenn ich dies von tehshin anwende, so ist, wenn kein anderes div zum Scrollen führt, der Balken um den Abstand vom oberen Browserrand zu gross.
    Muss man aber scrollen, so bleibt die Höhe gleich der Browserhöhe.

    Das div sollte aber immer zum unteren Rand vom body gehen!

    wapplegraph
     
  7. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo

    Weiss niemand eine Lösung, wie ich den Balken immer bis an den unteren Browserrand erweitern kann?
     
  8. iMacuser91

    iMacuser91 Kaiser Wilhelm

    Dabei seit:
    21.12.06
    Beiträge:
    174
    position: fixed;
    top: ??px;
    left: ??px;
    bottom: 0px;
    width: 200px;

    das könnte funktionieren, proboers mal aus. Nur das bleibt dann immer so.
    Ansonsten kannst du ja mal
    position: fixed;
    top: 0px;
    bottom: 0px;
    width: 200px;
    dafür vergeben und ein anderes Element auch mit der Breit 200 und Höhe den jetzigen Abstand von oben darein basteln, dann sollte es gehen (wenn du verstehst was ich meine).
    Quasi machst du was, das immer so die komplette Länge des Fensters hat, aber dann von anderem überlagert wird, am besten noch z-index: 0 oder -1 oder so.
     
  9. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.547
    Weil die Problematik "bis zum unteren Rand" sehr schwierig ist, mal ganz dumm gefragt:

    Wäre es nicht das Einfachste, für die gewünschte Optik den background als pic mit dem blauen Feld (und den schwarzen Rändern) zu versehen? So ein Bild kann ja 1 Pixel hoch sein (Bildwiederholung dann "nach unten") und wäre dann entsprechend klein.
     
  10. MasterofDistres

    MasterofDistres Kleiner Weinapfel

    Dabei seit:
    07.12.06
    Beiträge:
    1.139
    Mal so ganz am Rande, du hast 2x einen HEAD Teil eingebaut ;)

    Außerdem steht dein balken_v außerhalb vom 1. </HTML>… Also

    </body>
    </html>

    zwischen </table> und </div> löschen, dann hat das Teil auch erstmal die gewünschte Höhe von 5000px.

    Aber vielleicht mit Hilfe von http://kuler.adobe.com/ die Farbwahl noch überarbeiten, da lässt sich manches (z.B. die Links der Navigation) sehr schlecht lesen ;)

    Und am Besten für die ID-Bezeichnungen englische Begriffe nehmen, damit auch nicht deutsche Personen den Quelltext besser verstehen können ;)
     
  11. iMacuser91

    iMacuser91 Kaiser Wilhelm

    Dabei seit:
    21.12.06
    Beiträge:
    174
    Noch eine zweite Idee wäre, eine Art 'Inhaltsbox' zu verwenden mit min-height: 100%; und der gewünschten Breite in die dann alles rein kommt, darin kannst du dann dem Inhalt auch nur 500px Höhe oder so geben, aber dem Streifen 100%.
    Das min-height bewirkt dann für den Balken, dass von Anfang an 100% hoch ist und beim Scrollen größer wird und (wahrscheinlich) immer 100% bleibt. Damit du dann an de Seiten (oben, unten, links, rechts) keine weißen Ränder hast könntest du noch body{margin: 0px;} machen.
    Falls der Effekt aber links/rechts gewollt ist, dann kannst du ja der Inhaltsbox margin-right: 5px; margin-left: 5px oder so geben.
     
  12. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo

    Also das mit dem Hintergrundbild habe ich mir auch überlegt. Habe aber gedacht vielleicht gibt es eine andere Lösung.

    Das mit dem </html> verbessere ich. Die Farben sind noch gar nicht richtig. Bitte nicht motzen.

    Ich probiere nun einmal den Vorschlag von iMacuser91. Muss ihn aber zuerst noch genau studieren.

    Merci wapplegraph
     
  13. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo

    Also ich habe nun alles in ein div#all getan mit der min-height:100% und dem div#balken_v gab ich die Höhe 100%. Nun ist er einfach so hoch wie es Inhalt hat.

    Den Tipp mit body{margin: 0px;} konnte ich gebrauchen.

    Merci wapplegraph
     
  14. iMacuser91

    iMacuser91 Kaiser Wilhelm

    Dabei seit:
    21.12.06
    Beiträge:
    174
    Also ist alles richtig oder geht es immer noch nicht?
    Kannst mir ja mal die Dateien schicken (auch Bilder, damit ich das testen kann) nur ohne Inhalt, nur das leere Design quasi, dann guck ich mir das mal an.
     
  15. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo

    Wenn ich es so machen würde, so muss ich ja unten immer noch einen Streifen anhängen, welcher min 30px hoch ist oder einfach bis zum unteren Rand des Browserfenster geht. Ist dies einfacher um zu setzen?

    wapplegraph
     
  16. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.547
    hmmm ... das verstehe ich nicht so ganz.

    Dieser 30px breite untere Streifen soll für Deinen Footer bestimmt sein? Oder hast Du damit was anderes vor?

    Gruß,
    Nathea
     
  17. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Ja er soll nur mein footer sein, mit einer minimalen Höhe von 30px. Oder sonst bis ans untere Ende des Browserfensters.
     
  18. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.547
    Der Footer bekommt einen farbigen Hintergrund und liegt ohnehin "über" dem background-Bild. Der wird Dich also nicht behindern :D
     
  19. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo

    Jetzt versteh ich es nicht ganz oder du. Mein Ziel: einen Balken bis ans Ende des Browserfensters.
    Er hat jedoch immer eine andere Höhe im Vergleich zum Inhalt.
    Hier brauch er eine andere Höhe als hier.

    Dies möchte ich möglichst einfach umsetzen können.

    wapplegraph
     
  20. iMacuser91

    iMacuser91 Kaiser Wilhelm

    Dabei seit:
    21.12.06
    Beiträge:
    174
    Das Menü hat einfach eine andere Höhe als der Inhalt - das ist Fakt und auch variabel (Einstellung des Besuchers).
    Um das zu umgehen könntest du ein Hintergrundbild machen, welches beides aneinander darstellt und das als Hintergrund für #all oder so nehmen. (wenn du einfach ein Hintergrundbild für je Menü und Inhalt nehmen würdest, dann ändert das NICHTS, das bleibt einfach so)
    1px hoch und so breit wie beides zusammen, dann einfach dem Text und dem Menü keinen (!) Hintergrund geben aber eine Breite (die jetzige) - dem Menü noch float:right; und unten unter alle einen Footer mit clear:both; (zur Sicherheit - kann auch ein <br> sein) und fertig.
    Margin-bottom sollte bei #all und dem Menü/Inhalt immer 0 sein, dann geht beides immer bis zum Boden.
    Nun hast du einen viereckigen Kasten, der immer bis zum Boden geht und brauchst noch unten die abgerundete Ecke:
    Bild erstellen wie vorher, nur die Ecke nehmen und nur das äußere Stück nehmen, das was also vom Rest „abgeschnitten“ wurde um die Ecke rund zu machen. Das schneidest du dann als kleines Viereck aus (damit das Bild klein ist, also quasi nur soweit, dass NUR die Ecke dargestellt wird) und platzierst es dort mit position: relative; (usw) oder margin: 0px; padding: 0px; ganz unten links.
    Fertig.
     

Diese Seite empfehlen