height - ボディラインの自動サイジングの問題

Question

基本的に私のコンテナであるボディラインを次の高さにしたい:

bodyline{
    height:500px;
    min-height:500px;
    height:auto !important;
}

しかし、これに設定すると、実際には機能しません。私のフッターは真ん中に配置されており、その中にあるフッター div を台無しにしています。誰にも提案はありますか。多分私はコードを間違えたか、本当によくわからない何かをしました。

例

http://jsfiddle.net/zrUSr/

誰か助けてください。

Answer 1

ライブデモ

overflow hiddenちょっと今、あなたのCSSであなたのdiv idを次のように定義してください

#bodyline {
    background-color: #FFFFFF;
    border-radius: 10px 10px 0 0;
    margin: 0 auto;
    min-height: 300px;
    overflow: hidden; // add this line 
   padding-top: 320px; //add this line
    position: relative;
    width: 1000px;
} 




#midSection {
    color: #000000;
    float: left;
    height: auto !important;
    margin: 0 auto;
    min-height: 100px;
    padding-bottom: 50px;
    padding-left: 30px;
    padding-right: 10px;
    position: relative;
    top: 320px; // remove this line
    width: 600px;
}

ライブデモ

Answer 2

わかりましたので、私は何人かの人々が上で何をすべきか私に言ったことをしました。その後、

bodyline{
 min-height:500px;
 height:500px;
height:auto !important;
}

height:auto が追加されていなかったので追加したのでjsfiddleをチェックhttp://jsfiddle.net/jAXp2/

このコードを見つけます

 /*Add this as many times as you want to*/
 <div id="midSection">
<h2>Updates</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum. Fusce vel lectus arcu. Quisque quis elit et lorem suscipit faucibus a ut odio. Proin ut ante consectetur dui mattis pulvinar non quis neque. Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit. Mauris sagittis aliquam odio vitae pulvinar. Suspendisse id dolor nibh, sed consectetur sem. Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis. Morbi accumsan tempus neque, sed varius lectus molestie imperdiet. Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac. Quisque dolor tellus, porta in ultrices sit amet, luctus sed nunc. Quisque sodales scelerisque orci sed ullamcorper. Nunc nisl arcu, dignissim sed tempor eget, blandit a massa. Praesent ut metus enim, in dictum felis. Integer sagittis ipsum eu mauris lacinia rhoncus. Mauris turpis ligula, dapibus nec rhoncus bibendum, tristique eu nunc. Duis dapibus blandit justo et auctor. Nunc non elit vel diam luctus ullamcorper.

Nulla elementum tristique ultricies. Etiam sit amet felis leo, non imperdiet sapien. Suspendisse venenatis, erat ac mollis sagittis, nulla arcu semper felis, a tempus dolor nibh in est. Nullam. </p>
  </div>
/*Add this as many times as you want to*/

その後に何度でも追加して、動作を確認してください。

必要なだけボディラインを拡張することがわかります。