kostenloser Webspace werbefrei: lima-city

min-height %

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   juliantop

   juliantop hat kostenlosen Webspace.

   11:40, 26.12.2011

   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.
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. stargate

   

   stargate hat kostenlosen Webspace.

   12:10, 26.12.2011

   lad mal die css datei dazu hoch, vll kann ich dir dann helfen
4. Autor dieses Themas

   juliantop

   juliantop hat kostenlosen Webspace.

   12:20, 26.12.2011

   * 
   {
     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; 
   }

5. t*****o

   14:56, 28.12.2011

   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

6. w**************n

   18:22, 9.5.2012

   Das versteh ich nicht, height:100% wird doch mit height:auto!important überschrieben. Das versteht auch der IE.

7. pelp

   pelp hat kostenlosen Webspace.

   17:59, 10.6.2012

   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

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?