Question

我有一个父div（容器），它有一个子div（内部），它也有动态创建的子div。我正在使用jquery水平滚动来自#inner的溢出。我的问题是，虽然我不希望#container水平扩展，但我确实希望它垂直扩展，但它不会扩展到#inner的全高。我试过在#inner之后添加一个明确的div，但是没有用。我还尝试将#container的显示更改为：inline和display：inline-block。内联垂直扩展#container到适当的高度，但基本上将溢出更改为auto，以便即使溢出设置为隐藏，您也可以在底部看到水平滚动条。我的目标是有一个垂直滚动条而没有水平滚动条，同时#container垂直扩展到它的子内容。那有意义吗？这是我的标记...

<div id="container">
   <div id="inner">
       <div class="post">
           <p>content</p>
       </div>
       <div class="post">
           <p>content</p>
       </div>
       <div class="post">
           <p>content</p>
       </div>
   </div>
   <div class="clear"></div>
</div>

和css ......

body {
    margin:0;
    padding:0;
    height: 100%;
    line-height: 1.2em;
    font: normal 12px 'Helvetica','Arial','Verdana','sans-serif';
    color:#E0DFE3;
    background:#dad3c1 url(../images/duck-bg1500x.jpg) no-repeat fixed;
}
#container {
    overflow:auto;
    border:#888888 solid 1px;
    margin:10px;
}
#inner {
    position:relative;
    top:100px;
 width:3600px;
    margin:0;
    padding:0;
}
.post {
    background:url("http://www.loodieloodieloodie.com/images/opac-bg2.png") repeat scroll transparent !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    width: 600px;
    padding: 20px;
    position: relative;
    top:50px;
    margin: 0 25px;
    float:left;
}
.clear {
    clear:both;
}

提前感谢您提供任何帮助，乙

Answer 1

我认为您的问题来自于使用您孩子元素的相对位置。如果你将它们切换为使用边距进行定位，容器会将内容保存得更像你想要的（我认为）。给这个css一个机会！

body {
    margin:0;
    padding:0;
    height: 100%;
    line-height: 1.2em;
    font: normal 12px 'Helvetica','Arial','Verdana','sans-serif';
    color:#E0DFE3;
    background:#dad3c1 url(../images/duck-bg1500x.jpg) no-repeat fixed;
}
#container {
    overflow:scroll;
    border:#888888 solid 1px;
    margin:10px;
}
#inner {
    width:3600px;
    margin:0;
    padding:0;
}
.post {
    background:url("http://www.loodieloodieloodie.com/images/opac-bg2.png") repeat scroll transparent !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    width: 600px;
    padding: 20px;
    position: relative;
    margin: 50px 25px;
    float:left;
}
.clear {
    clear:both;
}

父Div不会垂直扩展

1 个答案: