Centering Div tout en étant capable de développer div

J'ai trouvé cette solution pour centrer mon div verticalement et horizontalement. Cependant, si je remplis la section de contenu au-delà de la longueur définie pour la div, elle sera exécutée en dehors de celle-ci. J'espérais le faire se développer en fonction du contenu de la div. Comment puis-je faire en sorte que cela puisse arriver?Centering Div tout en étant capable de développer div

JSFIDDLE

HTML:

<body> 
    <div id="wrapper"> 
     <div id="headerwrapper"> 
      <div id="header" class="center">header</div> 
     </div> 
     <div id="titlewrapper"> 
      <div id="title" class="center">title</div> 
     </div> 
     <div id="contentwrapper"> 
      <div id="content" class="center">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div> 
     </div> 
     <div id="footerwrapper"> 
      <div id="locationwrapper"> 
       <div id="location" class="center">location</div> 
      </div> 
      <div id="copyrightwrapper"> 
       <div id="copyright" class="center">copyright</div> 
      </div> 
     </div> 
    </div> 
</body>

CSS:

html body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 
.center { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    margin-right: auto; 
    margin-left: auto; 
    width: 100%; 
    height: 100% 
    max-width: 5em; 
} 
#wrapper { 
    background-color: pink; 
    height: 100%; 
    width: 100%; 
} 
#headerwrapper { 
    background-color: green; 
    width: 100%; 
    height: 8em; 
} 
#header { 
    color: white; 
    background-color: black; 
} 
#titlewrapper { 
    background-color: red; 
    width: 100%; 
    height: 8em; 
} 
#title { 
    color: white; 
    background-color: black; 
} 
#contentwrapper { 
    background-color: blue; 
    width: 100%; 
    height: 8em; 
} 
#content { 
    color: white; 
    background-color: black; 
} 
#locationwrapper { 
    background-color: yellow; 
    width: 100%; 
    height: 8em; 
} 
#location { 
    color: white; 
    background-color: black; 
} 
#footerwrapper { 
    background-color: brown; 
    width: 100%; 
    height: 100%; 
} 
#copyrightwrapper { 
    background-color: green; 
    width: 100%; 
    height: 8em; 
} 
#copyright { 
    color: white; 
    background-color: black; 
}

Source

2014-06-27 Michael Stephens

Vous ne pouvez pas avoir une hauteur fixe et l'élément à avoir une hauteur en fonction du contenu via moyen de CSS/HTML pur. Et aussi, pensez à préciser de quelle div vous parlez. – knitevision

Si vous voulez que les sections "contenu" pour ajuster dynamiquement la hauteur, la hauteur décollent fixe.

Change:

#contentwrapper { 
    background-color: blue; 
    width: 100%; 
    height: 8em; 
}

Pour:

#contentwrapper { 
    background-color: blue; 
    width: 100%; 
}

violon de travail à vos besoins: http://jsfiddle.net/k5YUu/6/

Source

2014-06-28 02:14:08

Centering Div tout en étant capable de développer div

Répondre

Questions connexes