У меня есть веб-страница, на которой я загружаю твиттер через ajax. Мои вызовы 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>
Он правильно загружает результат в 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;
}