Question

我有一个网页，我通过ajax加载Twitter Feed。我的html和jquery调用看起来像这样：

<body>
<div class="document-wrapper">
    <div class="document">
        <div class="content">   
                <div class="right-column">
                    <h2 class="twitter-header">Recent Tweets</h2>
                    <div class="twitter-feed" id="feed">
                    </div>
                </div>
<script type="text/javascript">
   $(document).ready(function () {
        $('#feed').load("/Home/Twitter", '', showNewContent)
   }); 
   function showNewContent() {  

    }  
</script>
</div>(document)
<div class="document-end"></div>

它将结果正确地加载到feed div中，但没有一个容器调整其高度并且溢出很差。所有div都设置了height:auto;，但似乎什么也没做。如果我在文档类上设置了一个最小高度，它有点工作，但我不想在那里静态地使用它。

经过仔细检查后，文档div似乎正在调整大小，但是当它调整大小时，它不会在其下方推动它。页脚保持原位，新内容在其后面呈现，不可选择或任何内容。

有没有办法让页面在ajax调用后正确调整大小？

编辑：这是一些css：

.footer-wrapper,
.document-wrapper {
width       : 960px;
margin      : 0 auto;
position    : relative;
height      : auto;
}

.document-wrapper { background : url(background-content.jpg) top repeat-y; }

.document { 
padding : 0 35px 75px 35px;
height: auto;
}

.document-end {
height      : 39px;
width       : 960px;
margin      : 0;
background  : url(background-content-end.jpg) top no-repeat;
}

.right-column {
float       : right;
width       : 300px;
font-size   : 90%;
position    : relative;
left        : -30px;
padding     : 4px 0 0 0;
height: auto;
}

.twitter-feed 
{
height:auto;
color       : #ccc;
}

Answer 1

听起来你的元素并不完全具有“布局”。在寻找流畅的感觉时，您不必明确设置尺寸。 Div应该自动调整。

每当我有一个不能正确对待儿童尺寸的div时，我会加上明确的：两者;和浮动：左：

.yourDiv {
   clear: both;
   float: left;/* or right */
}

这几乎总是适合我。

否则，您必须计算孩子的组合高度并将容器设置为该高度。

在ajax请求后调整容器div的大小

1 个答案: