DIV positionné ne s'étend pas à la hauteur du contenu

Question

J'ai un div wrapper qui est positionné en absolu. Est-il possible d'étendre la hauteur de la div wrapper pour accueillir le contenu et afficher la couleur de fond. Ci-dessous le code je:

CSS

html, body { 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
border: 0px; 
} 

body { 
font-family: Arial,sans-serif; 
font-size: 2em; 
line-height: 1.5em; 
} 

#contentbody { 
position: absolute; 
left: 5px; 
right: 5px; 
top: 5px; 
bottom: 5px; 
background-color: Green; 
} 

HTML

<div id="contentbody"> 
<div id="content"> 
    <div style="height: 1500px;">some large content</div> 
</div> 
</div> 

Answer 1

Je ne Je pense que vous devez définir bottom dans #contentbody. En réglant à la fois top et bottom, vous forcez la hauteur de la div à être la hauteur du port de visualisation du navigateur moins 10 (haut et bas).

Answer 2

essayez d'utiliser style = "overflow: scroll" sur votre DIV

ÉDITÉ: à Remoe overflow: auto

Answer 3

Ajouter le overflow: hidden à votre sélecteur html,body et trop-plein: auto à votre #contentbody div:

 html, body { 
     width: 100%; 
     height: 100%; 
     margin: 0px; 
     padding: 0px; 
     border: 0px; 

     overflow:hidden; /* overflow is hidden */ 
     } 

     body { 
     font-family: Arial,sans-serif; 
     font-size: 2em; 
     line-height: 1.5em; 
     } 

     #contentbody { 
     position: absolute; 
     left: 5px; 
     right: 5px; 
     top: 5px; 
     bottom: 5px; 
     background-color: Green; 

     overflow: auto; /* overflow is auto to allow scrolling */ 
     }