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*/

在它之后添加它多次以查看它的运行情况。

您会看到它可以根据需要扩展身体线条。