css - Automatisk tilpasning af div højde ved andet indhold - Udvikleren.dk

Tags: css

Bruger #17251 @ 03.06.12 11:04

Hej

Jeg har en container, som indeholder nogle divs

et af disse er et div, som indeholde to bokse.

Jeg vil gerne, at det bagerste div "Main_content" tilpasses i højden, hvis indholdet i en af de øvrige divs "#left_content" bliver længere, således denne "baggrund" følger med, kan det lade sig gøre?

Min html

HTML kode

 <body background="bg.jpg">
 <div class="container">Content for  class "container" Goes Here
   <div id="logo">  </div>
   <div id="menuen">Content for  id "menuen" Goes Here</div>
   <div id="nav_info">Content for  id "nav_info" Goes Here</div>
   <div class="main_content">Content for  id "main_content" Goes Here</div>
   <div id="left_content">
     <p>Content for  id "left_content" Goes Here</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
   </div>
   <div id="right_content_box_2">Content for  id "right_content_box_2" Goes Here</div>
   
 </div>
 </body>

Min css

CSS kode

 @charset "UTF-8";
 .container {
     height: 1200px;
     width: 960px;
     clear: none;
     position: absolute;
 
     margin-top: 0px;
     left: 50%;
     margin-left: -480px;
  
 
 }
 #logo {
     position: absolute;
     height: 82px;
     width: 482px;
     top: 0px;
     left: 0px;
     background-image: url(logo.png);
 }
 .menu {
     padding: 0px;
     float: left;
     height: 33px;
     width: 479px;
 }
 
 
 #menuen {
     position: absolute;
     left: 482px;
     background-image: url(menu.png);
     top: 0px;
     height: 33px;
     width: 480px;
 
 }
 #nav_info {
     top: 83px;
     left: 0px;
     position: absolute;
     height: 71px;
     width: 482px;
     
 }
 .main_content {
     height: 600px;
     width: 960px;
     top: 154px;
     position: absolute;
     left: 0px;
     background-color: #FFF;
     -moz-border-radius-bottomright: 15px;
     border-bottom-right-radius: 15px;
     -moz-border-radius-bottomleft: 15px;
     border-bottom-left-radius: 15px;
     -moz-border-radius-topright: 15px;
     border-top-right-radius: 15px;
     -moz-border-radius-topleftt: 15px;
     border-top-left-radius: 15px;
 }
 #left_content {
     height: 321px;
     width: 424px;
     top: 215px;
     background-color: #03C;
     z-index: 3000;
     position: absolute;
     left: 26px;
     overflow: auto;
 }
 #right_content_box_2 {
     background-color: #9F0;
     position: absolute;
     height: 159px;
     width: 455px;
     left: 482px;
     top: 380px;
     -moz-border-radius-topright: 15px;
     border-top-right-radius: 15px;
     -moz-border-radius-topleftt: 15px;
     border-top-left-radius: 15px;
 }

9 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 13 karma

Sorter efter stemmer Sorter efter dato

Bruger #9814 @ 03.06.12 11:14

1.302

Hvis du dropper height angivelsen på din CSS til main_content, tilpasses højden altid til det aktuelle indhold.

Bruger #15754 @ 03.06.12 13:05

989

main-content ligger inden i container som har en fast højde. Prøv og fjern den - oftest burde du arbejde uden faste højder hvis du ønsker højden skal være dynamisk ift. indholdet.

Bruger #17215 @ 03.06.12 11:39

408

Ellers kan du også erstatte "height" med "min-height" da du vil være sikker på den mindst er 600px høj, men kan blive større.

Bruger #17251 @ 03.06.12 11:51

Hej

Tak begge to

Desværre kan jeg ikke få det til at virke.
Det div der hedder "left-content" prøver jeg at indsætte tekst i, og vil så gerne have det gør "main_content" længere, men det sker ikke, kan det lade sig gøre?

Bruger #17215 @ 03.06.12 12:33

408

prøv at sætte "display: inline-block;" på dine 3 div'er og se om det gør en forskel

Bruger #17251 @ 03.06.12 13:02

Hej

Desværre ikke, den gør ikke main-content længere :-(

Bruger #9814 @ 03.06.12 13:03

1.302

Smid lige et link til det hvor vi kan se siden. Så er det lidt nemmere :-)

Bruger #17215 @ 03.06.12 14:11

408

Hvis du fjerner position: absolute i left og right så?

Bruger #5789 @ 04.06.12 16:34

640

Narj hvis en container kun indeholder flydende elementer vil den aldrig få nogen højde, altid 0. Ej heller hvis alle dens elementer er absolut positioneret

Få fjernet det absolut positionering, og kig på clearfix, alternativt tiløj endnu en wrapper

http://www.webtoolkit.info/css-clearfix.html

/J

Automatisk tilpasning af div højde ved andet indhold

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler