kostenloser Webspace werbefrei: lima-city

Kasten mit 100% höhe erstellen

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

1. Autor dieses Themas

   pcundsoftware

   

   pcundsoftware hat kostenlosen Webspace.

   21:36, 26.9.2009

   Hallo,
   ich habe ein tag/problem">Problem.
   Ich möchte auf meiner Webseite einen Kasten erzeugen der nach unten 100% lang ist, also an das andere element darunter angrenzt. Nur leider wird der Kasten nur so groß, so viel text drinnensteht. Wie kann ich das umgehen.
   Der quellcode des Elements aus der css datei:
   
   [code
   ]#linkespalte{
   background: gray url('images/menu.jpg') repeat-y;
   width: 217px;
   height: 100%;
   padding: 0px;
   float: left;
   }
   [/code]
   
   Schöne Grüße
   pcundsoftware

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

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

3. hasenmeister

   

   hasenmeister hat kostenlosen Webspace.

   21:48, 26.9.2009

   die 100% höhe deiner box beziehen sich immer auf das elternelement, d.h.: deine box kann immer nur so groß sein wie das elternelement. nur lässt sich aus deinem codefragment schlecht ersehen ob und was für ein element deiner box übergeordnet ist. ein link auf entsprechende site wäre recht hilfreich um dein problem zu lösen.
   
   mfg
4. Autor dieses Themas

   pcundsoftware

   

   pcundsoftware hat kostenlosen Webspace.

   21:52, 26.9.2009

   Hier einmal der Komplette code:
   

   /* Grunddefinitionen */
   
   html{
   	height: 101%;
   }
   
   body{
   	font-family: Arial, Helvetica, Sans-Serif;
   	font-size: 12px;
   }
   
   /* Gesamtcontainer */
   
   #container{
   	background: #ffffff;
   	width: 950px;
   	margin: 0 auto;
   	padding-top: 15px;
   }
   
   /* Hauptbereiche */
   
   #oben{
   	background: #ffffff url('images/bannermmc.jpg') no-repeat;
   	width: 100%;
   	height: 200px;
   	padding-bottom: 7px;
   }
   
   #mitte{
   	background: #ffffff;
   	width: 944px;
   	padding-top: 0px;
   	padding-bottom: 0px;
   	float: left;
   	border:3px solid #e9a60d;
   }
   
   #zwischenraum{
   	background: #ffffff;
   	width: 100%;
   	height: 7px;
   	float: left;
   }
   
   #footer{
   	background: #872371 url('images/footer.jpg') no-repeat;
   	width: 100%;
   	height: 65px;
   	padding-top: 0px;
   	float: left;
   }
   
   /* Einzelabschnitte */
   
   #linkespalte{
   	background: gray url('images/menu.jpg') repeat-y;
   	width: 217px;
   	height: 100%;
   	padding: 0px;
   	float: left;
   }
   
   #breadcrumbs{
   	background: #ffcc66;
   	width: 727px;
   	height: 25px;
   	padding: 0px;
   	float: right;
   }
   
   #news{
   	background: #ffe953;
   	width: 727px;
   	height: 100px;
   	padding: 0px;
   	float: right;
   }
   
   #content{
   	background: #ffff99;
   	width: 727px;
   	height: auto;
   	padding: 0px;
   	float: right;
   }

   
   

5. hasenmeister

   

   hasenmeister hat kostenlosen Webspace.

   22:13, 26.9.2009

   ich geh mal von aus das der bezug

   #mitte#zwischenraum

   ist, da fehlt deiner mitte-box eine height eigenschaft, und schon sollte es funzen es sei denn die höhe deines elterelements ist

   height:auto !important;

   dann klappts net.
   
   also quasi:
   
   

   html:
   ...
   <div id="parentBox">
      <div id="childBox">...</div>
   </div>
   ...
   
   
   css:
   
   #parentBox{width:944px;height:500px;/*zB*/float:left;}
   #childBox{width:217px; height:100%; float:left;}

   
   
   ich persönlich lös das aber ein wenig einfacher siehe hier http://hasenmeister.lima-city.de
   einfach den hintergrund über die komplette breite slicen, und transparente boxen drüberlegen, da ist die höhe nämlich egal.

6. d************h

   0:02, 27.9.2009

   geht auch einfacher!
   
   einfach dem body-tag folgende attribute hinzufügen:
   
   

   topmargin="0" leftmargin="0"

   
   
   und dann über css den div-tags die höhe 100% geben!
   
   Beitrag zuletzt geändert: 27.9.2009 0:02:38 von dynamic-search

7. hasenmeister

   

   hasenmeister hat kostenlosen Webspace.

   0:14, 27.9.2009

   ist antürlich auch eine möglichkeit, die aber mittlerweile ein bissel als veraltet gilt da sie erstens im html formatiert und zweitens explizit nur für den body-tag gelten in dem sie formatiert werden. das gleiche nur ein bischen allgemeingültiger wäre:
   
   

   <body style="margin:0px;">

   noch besser wäre es die body-eigenschaft in einem externem stylesheet zu definieren.
   
   und wenn man nur spezielle body-klassen formatieren möchte gäbe es dann noch die option das folgendermaßen zu tun:
   
   

   html:
   <body class="irgendeineKlasse">
   css:
   .irgendeineKlasse{...eigenschaften}

   

8. e********l

   1:44, 27.9.2009

   Zum einen wie schon gesagt das Body Tag auf 100% setzen und zum anderen erreichst du einen 100% Kasten nur noch mit Tabellen. DIVs neigen leider dazu nur den genutzen Platz auszufüllen in der Höhe. Und es soll ja wenn schon in mehreren Browsern gut ausschauen ;)
9. Autor dieses Themas

   pcundsoftware

   

   pcundsoftware hat kostenlosen Webspace.

   15:35, 27.9.2009

   danke, hat funktioniert
   
   Schöne Grüße
   pcundsoftware

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

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

Dir gefällt dieses Thema?