kostenloser Webspace werbefrei: lima-city


min-height %

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    juliantop

    juliantop hat kostenlosen Webspace.

    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. lad mal die css datei dazu hoch, vll kann ich dir dann helfen
  4. Autor dieses Themas

    juliantop

    juliantop hat kostenlosen Webspace.

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

    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

    Das versteh ich nicht, height:100% wird doch mit height:auto!important überschrieben. Das versteht auch der IE.
  7. 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 :cookie:
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!