居中Div，同時能夠擴大div

我發現這個解決方案，垂直和水平居中我的股利。但是，如果我填寫內容部分超過爲div定義的長度，它將在其外部運行。我希望能夠根據div內的內容進行擴展。我該如何做到這一點？居中Div，同時能夠擴大div

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; 
}

來源

2014-06-27 Michael Stephens

你可以沒有固定的高度，使元件獲得高度依賴於通過內容純CSS/HTML的手段。另外，請考慮指出你在說什麼。 – knitevision

如果你想在「內容」部分，以動態地調整高度，起飛的固定高度。

變化：

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

要：

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

工作撥弄你的要求：http://jsfiddle.net/k5YUu/6/

來源

2014-06-28 02:14:08

居中Div，同時能夠擴大div

回答

相關問題