Container soll restliche Seitenhöhe einnehmen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktuellen browser
angabe
annehmen
attribut
ausprobieren
auto
automatisch passen
code
computer
display
ecke
entwurf
fenster
idee
machen
realisieren
rest
safari
tabelle
url
-
Hallo,
in meinem Webseitenentwurf habe ich oben ein Logo und einen Navigationsleiste, darunter den Content.
Wie stelle ich es jetzt an, dass die Contentbox immer die restliche Seitenhöhe einnimmt, egal wie viel drin steht?
Wenn zu viel drin steht soll mit overflow: scroll/auto ein Scrollbalken angezeigt werden.
Vielen Dank schon mal im Voraus
Computer-Ecke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hey,
Du kannst aussen rum (komplett aussen, also auch das Logo und die Navi mit einschließen) ein div mit 100% machen, dann den beiden (logo, navi) ihre höhen zuweisen und der Rest müsste automatisch passen.
Alternativ (aber das ist sehr unsauber, wird bestimmt vom validator auch moniert) einfach beim content-div folgenden wert für die höhe: 100% -(höhe logo und nav)px; Funktioniert bei den meisten Browsern auch, ist aber wie gesagt, ein extrem übler Stil.
LG,
Nico
edit: ich bin direkt mal davon ausgegangen, dass du reines css nutzt, sollte aber vielleicht auch gesagt werden, dass ich nicht weiß, wie sich das mit dem html-Attribut "height" verhält, würde ich aber auch nicht mehr ausprobieren ;)
Beitrag zuletzt geändert: 13.9.2012 20:52:02 von nicoa -
hm4-blog schrieb:
Nein, genau das wollte er nicht, ließ dir bitte nochmal den Eingangspost durch. Der Threadersteller wies darauf hin, er wolle, dass die Contentbox immer die restliche Höhe einnimmt, egal wie viel drin steht, also im Prinzip das genaue Gegenteil von dem, was du hier in zwei Zeilen vorschlägst.
Vielleicht ist das was für dich:
lgmin-height:100%;
Beitrag zuletzt geändert: 13.9.2012 21:17:29 von nicoa -
also ich denkle die beste lösung sieht so aus, wenn man html4 und css2 valide, browserkonform und ohne scripte arbeiten will:
die "contentbox" ist eine tabelle mit einer reihe und einer zelle, da man hierfür mit css "height:100%" effektiv die mindesthöhe festlegt. ausserdem ermöglicht es auch die vertikale zentrierung innerhalb der "contentbox" über css "vertical-align_middle" der tabellenzelle.
<table> <tr> <td></td> </tr> </table>
wenn man jetzt aus seo-gründen noch die semantik beachten will macht man aus der html-tabelle ein html-div-konstrukt das mit css zu einer tabelle umgeformt wird:
<div class="tabelle"> <div> <div></div> </div> </div>
html, body { height:100%; margin:0px; padding:0px; overflow:auto; text-align:center; } .tabelle { display:table; width:770px; height:100%; margin:0px auto; } .tabelle > div { display:table-row; } .tabelle > div > div { display:table-cell; vertical-align:middle; }
beachte das die angabe zu height:100% immer von ganz aussen (html,body) bis zum element durchgereicht werden muss.
das overflow kommt dann im body zustande wenn der inhalt der "contentbox" höher als das fenster wird.
durch optionales einbinden einer zweiten "table-row" mit vertical-align:bottom kann man auch eine untenstehende fusszeile realisieren.
-
Vielen Dank,
nicoas Idee hat bei mir zwar nicht so ganz funkioniert, hat mich dann aber auf die Lösung gebracht.
Deshalb habe ich die Idee mit der Tabelle gar nicht mehr ausprobiert.
Computer-Ecke -
computer-ecke schrieb:
Hey,
Vielen Dank,
nicoas Idee hat bei mir zwar nicht so ganz funkioniert, hat mich dann aber auf die Lösung gebracht.
Deshalb habe ich die Idee mit der Tabelle gar nicht mehr ausprobiert.
Computer-Ecke
freut mich, dass meine Idee den Anstoß brachte. Magst du denn auch die Lösung posten, damit auch zukünftig Leute mit dem Problem, die diesen Thread evtl. finden, diese wissen? (Ausserdem interessiert es mich auch, wie du es jetzt gelöst hast
)
LG, Nico -
Ich hab jetzt die höhe von header und navigationsleiste als Prozentzahl angegeben und die vom Rest dann auch.
Ich weiß nicht warum ich nicht früher drauf gekommen bin, aber bei deiner Lösung hab ich nach und nach noch ein parr Sachen verändert und dann hat ichs irgendwann.
In einiger Zeit wird der Entwurf dann auch online sein. -
Ich weiß ja nicht welche Browser ihr verwendet, aber ich hab mal eben die aktuellen Browser (Opera, IE, FF, Safari, Chrome) durchprobiert, keiner will mein
annehmen..war mir schon vorher sicher, aber ich musste es nochmal testen...height: 100%;
Edit: Die Höhe beschreibt nen DIV
Beitrag zuletzt geändert: 18.9.2012 17:27:31 von copynpaste -
keiner will mein height: 100%;annehmen..
das klingt für mich so als hättest du nicht beachtet das sich css height:100% auf die höhe des direkten elternelements bezieht.
das bedeutet das wenn du etwas auf 100% der fensterhöhe haben willst, du die css angabe für height entsprechend vom ganz oben (von html,body für fenster angefangen) durchreichen musst.
wenn du nicht explizit in css für html, body height:100% aufschreibst klappts nicht mit dem weiterreichen. ein kleines beispiel (auch wenns layout-technisch weniger sinn macht):
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> html, body { height:100%; margin:0px; padding:0px; overflow:auto; } </style> </head> <body> <div style="height:400%;"> <div style="height:25%;"> <p>das äußere div ist 4x so hoch wie der body und das innere div wiederum nur ein viertel so hoch wie das äußere div - also ist das innere div genauso hoch wie der body</p> </div> </div> </body> </html>
...das nimmt eigentlich jeder an.
Beitrag zuletzt geändert: 18.9.2012 19:20:17 von hcms -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
