zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Höhenproblem mit 100% hohem div

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.11.2009, 16:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard Höhenproblem mit 100% hohem div

Hallo Forum,

ich dreh durch.

Ein 100% hohes div (html, body sind mit 100% Höhe versehen) wird scheinbar wirklich 100% hoch dargestellt. Wenn jedoch gescrollt wird zeigt sich, dass sich die 100% Höhe nicht auf die übergeordneten Tags beziehen sondern auf das sichtbare Browserfenster.

Woran liegt das?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.11.2009, 17:03
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Du mußt für die wichtigen übergeordneten Container min-height angeben, nicht nur height. Ansonsten wird nur das Browserfenster gezeichnet.

Siehe Faq 100% Höhe.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.11.2009, 18:20
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard gemacht wie gesagt ...

... aber hat sich leider ohne Auswirkung gezeigt:

Hier mal die Styles für html und Body:

HTML-Code:
html{ 

	Width: 100%;
	Height: 100%;
	Margin: 0px;
	padding:0px;
 
}

body{ 
	background-color: #b6d4e3;
  	margin:0px; 
	padding:0px;
	Width: 100%;
	Height: 100%;
	min-height:100%;
}
... und si sieht das erste div nach dem body-tag aus:

Code:
<div style="text-align:center; background-color:#396; height:100%;">content</div>
... sieht auch wieder gut aus, beim resizen bleibt unten alles schön dicht ... doch beim Scrollen erscheint die Hintergrundfarbe des Body in dem vorher von der Browser-Kante verdeckten Bereich.

An was kann das noch liegen?
Mit Zitat antworten
  #4 (permalink)  
Alt 23.11.2009, 19:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard Gelöst!

DOCH NICHT GELÖST ... wäre ja auch quatsch gewesen ... wegendes CONTENT liess ich nun nur nicht die erkennen, dass das leere DIV nun nicht mehr 100% hoch ist ...

Kann doch nicht sein, dass es da keine Lösung ohne dieses verdammte Hintergrundbild gibt.

Geändert von emmis (23.11.2009 um 21:29 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 23.11.2009, 21:55
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

So wie es oben steht sollte das div nur height: auto; haben.
Zeige besser ein komplettes Beispiel mit Link.
__________________
MfG
Jens
Mit Zitat antworten
  #6 (permalink)  
Alt 23.11.2009, 22:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard ein dummie ist halt doch nicht die seite mit dem content

... wir bauen gerade um ... deshalb befand sich innerhalb des inneren DIV eine alte Tabelle, der noch 100% Höhe zugewiesen war. ... deshalb dieses oben beschriebene Verhalten.

Ausgangsdummie:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>ein titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
html, body {
height: 100%;
} 

* {
padding: 0;
margin: 0;
}
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}

#container {
min-height: 100%;
background-color: #DDD;
width: 500px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="container">inhalte</div>
</body>
</html>
... und das haut hin ...
Vielen Dank für die Bemühungen ...
Mit Zitat antworten
  #7 (permalink)  
Alt 23.11.2009, 23:03
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Das haut JETZT hin, aber nicht, wenn du ewig langen Content hast, der gescrollt werden muss...

nimm für HTML und Body, zumindest für letzteren, min-height 100%.

100% Höhe
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #8 (permalink)  
Alt 23.11.2009, 23:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard sicher ...

probier ich

NACHTRAG: wurde dadurch nicht "schlechter" , vielen DANK!!
Mit Zitat antworten
  #9 (permalink)  
Alt 24.11.2009, 13:52
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Wenn body min-height hat kann es aber kein (min)-height in Prozent für #container geben.

Dein Beispiel mit mit height für body und min-height für #container funktioniert doch.
__________________
MfG
Jens
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:11 Uhr.