min-height %
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
aufbau
auto
button
code
container
datei
element
funktionieren
helfen
inhalt
kombination
mache
nutz
page
problem
radius
setzen
text
verwenden
-
Hallo,
ich mache anscheinend mit min-height etwas falsch. Bei mir funktioniert nur die px oder em Angabe, sobald ich % nutze, passiert nichts.
Aufbau der divs siehst so aus:
<page> <Navi> <Button> </Button> ... <Button> </Button> </Navi> <Content> </Content> <Footer> </Footer> </page>
Unter google kommt immer nur heraus, man muss height und min-height in Kombination verwenden, sprich eine div vorher height auf 100% setzen und dann min-height auf 100% oder andere Kombination, aber keine davon hat mir etwas verändert.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
* { margin: 0; padding: 0; } body { background-color: gray; font: 80%/170% Arial; padding: 25px; } div#page { width: 950px; background-color: #0d2544; color: white; border-radius: 2em; border-width: 0.3em; border-style: solid; border-color: white; } div#Navi { background-color: #3B5998; padding: 2em 1em 1em 1em; border-top-left-radius: 2em; border-top-right-radius: 2em; text-align: center; border-bottom: 0.1em solid white; height: 1em; } div#Footer { background-color: #3B5998; padding: 1.5em; border-bottom-left-radius: 2em; border-bottom-right-radius: 2em; text-align: right; border-top: 0.1em solid white; } div#content { margin-top: 3em; padding: 1.5em; } div#Button a { font-size: 1em; font-weight: bold; float:left; background-color: slategray; padding: 0.5em; margin: 0.6em 0 0.5em 0.5em; text-decoration: none; min-width: 8.4em; border-width: 0.1em; border-style: solid; border-color: black; }
-
Wo nutzt du da min-height?
html, body { height: 100%; } div { min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; }
So kannst du einem Container eine Mindesthöhe von 100% geben. Dazu muss aber zu erst der Anzeigebereich auf die volle Höhe gestreckt werden, weil sich die prozentuale Höhe ja am Elternelement orientiert (und wenn dieses nun nicht die volle Höhe hat, kann es nicht funktionieren...).
das ganze funktioniert sogar im IE (durch height:100%).
Till -
Das versteh ich nicht, height:100% wird doch mit height:auto!important überschrieben. Das versteht auch der IE.
-
Bei min-heigth wird, bei mir im FF zumindest, das Element auf 100%-Höhe gestreckt. Ich weiß ja nicht, welchen Webbrowser du benutzt, aber bei mir funktioniert es.
Wenn dann eben der Inhalt mehr wird, dann geht es eben weiter als 100% - wie gewollt, oder?
Ich verstehe dein Problem (um ehrlich zu sein) immer noch nicht ganz...
VG
Pelp -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage