jquery - 水平 div 上的自动页面高度

Question

我有一个单页网站，其中的部分水平排列。

我遇到的问题是，我希望页面的大小与当前 div 的内容相同，但页面高度设置为最大 div 的高度，而在较小的 div 上有一个巨大的页脚。

我试过在 div 上使用高度自动，但这似乎没有任何区别

这是一个演示:http://jsfiddle.net/qnbBS/30/

还有一个带有水平扫描 div 的实例:live example

您可以看到第 3 页有大量文本，页脚位于页面底部，但在第一页和第二页上，页脚很大以填补空白。我正在尝试找到一种使页脚大小相等(比如 75 像素)的方法，因此它位于每个页面的底部，并且在内容较少的页面上没有额外的空间。

匹配演示的代码

CSS

html, body {
height: auto;
margin: 0;
overflow-x:hidden;
}
.wrapper {
width: 300%;
height: auto;
background: #263729;
}
.page {
width: 33.3333%;
float:left;
background: #992213;
min-height: auto;
}
#page-1 {
background: #0C717A;
}
#page-2 {
background: #009900;
}
#page-3 {
background: #0000FF;
}
a {
color:#FFF;
}
.footer {
background:red; 
}
.simulate {
height:auto;
}

html

<div class="wrapper">
<div id="page-1" class="page"> <a href="#page-1" class="scrollitem selected">page 1</a>  <a href="#page-2" class="scrollitem">page 2</a>
 <a href="#page-3" class="scrollitem">page 3</a>

     <h3>page 1</h3>

     <div class="simulate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet ante et neque finibus, et facilisis urna pulvinar. Curabitur tempus tempus nisi, a hendrerit nisi dapibus sed. Aliquam rutrum varius ex eu elementum. Etiam et venenatis tortor, vel lobortis metus. Ut vitae tortor eget sapien sagittis bibendum a ac magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis purus, lacinia vel pharetra vel, dignissim at lorem. Maecenas felis elit, viverra at augue luctus, rutrum molestie leo.</div>
    </div>
    <div id="page-2" class="page"> <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>

     <h3>page 2</h3>

    <div class="simulate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet ante et neque finibus, et facilisis urna pulvinar. Curabitur tempus tempus nisi, a hendrerit nisi dapibus sed. Aliquam rutrum varius ex eu elementum. Etiam et venenatis tortor, vel lobortis metus. Ut vitae tortor eget sapien sagittis bibendum a ac magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis purus, lacinia vel pharetra vel, dignissim at lorem. Maecenas felis elit, viverra at augue luctus, rutrum molestie leo. Donec a auctor est. Fusce vel lacus vehicula, rhoncus nulla nec, iaculis orci. Etiam tellus urna, iaculis eget lobortis ac, porttitor ut metus. Etiam et tempus neque, eu feugiat nibh. Nulla imperdiet magna dolor. Mauris ac varius risus, sed commodo tortor. Nullam dictum imperdiet libero, sit amet euismod augue tristique at. Praesent feugiat lectus et tempor dictum. Duis rutrum ligula quis urna euismod aliquet. Sed blandit gravida tortor, ac molestie augue sodales sed. Morbi bibendum est aliquet dolor porttitor sollicitudin. Nam fringilla et odio vel blandit. Curabitur egestas iaculis odio sit amet volutpat. Aliquam placerat tellus sed turpis tincidunt, et ornare nunc facilisis. Mauris tincidunt ac tortor nec tincidunt. Cras velit nibh, scelerisque a pulvinar consequat, vehicula a sem. Sed ultricies metus sit amet feugiat egestas. Cras eget aliquam sem. Sed sit amet purus dapibus, tristique justo at, lobortis ligula. Nam vitae ligula in magna molestie iaculis. Vivamus gravida placerat dapibus. Mauris eget molestie elit, facilisis rutrum nunc. Vivamus suscipit, nisl sed varius eleifend, dui erat semper diam, vel elementum neque lacus a ante. Nulla varius iaculis egestas. Quisque porttitor lacinia tristique.</div>
</div>
<div id="page-3" class="page"> 
    <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>

     <h3>page 3</h3>

    <div class="simulate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet ante et neque finibus, et facilisis urna pulvinar. Curabitur tempus tempus nisi, a hendrerit nisi dapibus sed. Aliquam rutrum varius ex eu elementum. Etiam et venenatis tortor, vel lobortis metus. Ut vitae tortor eget sapien sagittis bibendum a ac magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis purus, lacinia vel pharetra vel, dignissim at lorem. Maecenas felis elit, viverra at augue luctus, rutrum molestie leo. Donec a auctor est. Fusce vel lacus vehicula, rhoncus nulla nec, iaculis orci. Etiam tellus urna, iaculis eget lobortis ac, porttitor ut metus. Etiam et tempus neque, eu feugiat nibh. Nulla imperdiet magna dolor. Mauris ac varius risus, sed commodo tortor. Nullam dictum imperdiet libero, sit amet euismod augue tristique at. Praesent feugiat lectus et tempor dictum. Duis rutrum ligula quis urna euismod aliquet. Sed blandit gravida tortor, ac molestie augue sodales sed. Morbi bibendum est aliquet dolor porttitor sollicitudin. Nam fringilla et odio vel blandit. Curabitur egestas iaculis odio sit amet volutpat. Aliquam placerat tellus sed turpis tincidunt, et ornare nunc facilisis. Mauris tincidunt ac tortor nec tincidunt. Cras velit nibh, scelerisque a pulvinar consequat, vehicula a sem. Sed ultricies metus sit amet feugiat egestas. Cras eget aliquam sem. Sed sit amet purus dapibus, tristique justo at, lobortis ligula. Nam vitae ligula in magna molestie iaculis. Vivamus gravida placerat dapibus. Mauris eget molestie elit, facilisis rutrum nunc. Vivamus suscipit, nisl sed varius eleifend, dui erat semper diam, vel elementum neque lacus a ante. Nulla varius iaculis egestas. Quisque porttitor lacinia tristique. Aliquam ornare nibh sit amet tortor rhoncus, id accumsan nulla feugiat. Nunc pellentesque consectetur dapibus. Vestibulum sit amet lobortis augue. Cras justo nisl, ultricies molestie congue ut, ultrices et velit. Nam consectetur ligula vehicula consectetur dapibus. Etiam tempor condimentum massa quis dictum. Nunc semper, nunc quis tincidunt auctor, ipsum massa cursus lectus, accumsan posuere lectus magna eget lorem. Maecenas non vehicula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla imperdiet eros at magna mattis, et interdum metus rutrum. Sed semper sed odio sit amet tempor. Aenean sed odio efficitur, congue ligula nec, tempor augue. Nam nec tristique arcu. Aenean aliquam mollis tincidunt. Maecenas et leo quis ex aliquet euismod. Sed et ex eget nisl varius finibus. Aliquam nec lorem in massa venenatis gravida. Quisque non nibh sed diam pretium ultricies in imperdiet nulla. Fusce eget ornare elit. Mauris id mauris eget ante tempus mattis. Nam non aliquam lorem, nec egestas urna. Quisque consequat libero vitae ligula consectetur imperdiet. Vestibulum nec bibendum felis, quis imperdiet dui. Phasellus viverra ornare sem, sit amet rutrum nisi. Maecenas lobortis accumsan ex, at sagittis lectus imperdiet at. Donec vel nulla sem. Praesent quis aliquam arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet ante et neque finibus, et facilisis urna pulvinar. Curabitur tempus tempus nisi, a hendrerit nisi dapibus sed. Aliquam rutrum varius ex eu elementum. Etiam et venenatis tortor, vel lobortis metus. Ut vitae tortor eget sapien sagittis bibendum a ac magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis purus, lacinia vel pharetra vel, dignissim at lorem. Maecenas felis elit, viverra at augue luctus, rutrum molestie leo. Donec a auctor est. Fusce vel lacus vehicula, rhoncus nulla nec, iaculis orci. Etiam tellus urna, iaculis eget lobortis ac, porttitor ut metus. Etiam et tempus neque, eu feugiat nibh. Nulla imperdiet magna dolor. Mauris ac varius risus, sed commodo tortor. Nullam dictum imperdiet libero, sit amet euismod augue tristique at. Praesent feugiat lectus et tempor dictum. Duis rutrum ligula quis urna euismod aliquet. Sed blandit gravida tortor, ac molestie augue sodales sed. Morbi bibendum est aliquet dolor porttitor sollicitudin. Nam fringilla et odio vel blandit. Curabitur egestas iaculis odio sit amet volutpat. Aliquam placerat tellus sed turpis tincidunt, et ornare nunc facilisis. Mauris tincidunt ac tortor nec tincidunt. Cras velit nibh, scelerisque a pulvinar consequat, vehicula a sem. Sed ultricies metus sit amet feugiat egestas. Cras eget aliquam sem. Sed sit amet purus dapibus, tristique justo at, lobortis ligula. Nam vitae ligula in magna molestie iaculis. Vivamus gravida placerat dapibus. Mauris eget molestie elit, facilisis rutrum nunc. Vivamus suscipit, nisl sed varius eleifend, dui erat semper diam, vel elementum neque lacus a ante. Nulla varius iaculis egestas. Quisque porttitor lacinia tristique. Aliquam ornare nibh sit amet tortor rhoncus, id accumsan nulla feugiat. Nunc pellentesque consectetur dapibus. Vestibulum sit amet lobortis augue. Cras justo nisl, ultricies molestie congue ut, ultrices et velit. Nam consectetur ligula vehicula consectetur dapibus. Etiam tempor condimentum massa quis dictum. Nunc semper, nunc quis tincidunt auctor, ipsum massa cursus lectus, accumsan posuere lectus magna eget lorem. Maecenas non vehicula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla imperdiet eros at magna mattis, et interdum metus rutrum. Sed semper sed odio sit amet tempor. Aenean sed odio efficitur, congue ligula nec, tempor augue. Nam nec tristique arcu. Aenean aliquam mollis tincidunt. Maecenas et leo quis ex aliquet euismod. Sed et ex eget nisl varius finibus. Aliquam nec lorem in massa venenatis gravida. Quisque non nibh sed diam pretium ultricies in imperdiet nulla. Fusce eget ornare elit. Mauris id mauris eget ante tempus mattis. Nam non aliquam lorem, nec egestas urna. Quisque consequat libero vitae ligula conLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet ante et neque finibus, et facilisis urna pulvinar. Curabitur tempus tempus nisi, a hendrerit nisi dapibus sed. Aliquam rutrum varius ex eu elementum. Etiam et venenatis tortor, vel lobortis metus. Ut vitae tortor eget sapien sagittis bibendum a ac magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis purus, lacinia vel pharetra vel, dignissim at lorem. Maecenas felis elit, viverra at augue luctus, rutrum molestie leo. Donec a auctor est. Fusce vel lacus vehicula, rhoncus nulla nec, iaculis orci. Etiam tellus urna, iaculis eget lobortis ac, porttitor ut metus. Etiam et tempus neque, eu feugiat nibh. Nulla imperdiet magna dolor. Mauris ac varius risus, sed commodo tortor. Nullam dictum imperdiet libero, sit amet euismod augue tristique at. Praesent feugiat lectus et tempor dictum. Duis rutrum ligula quis urna euismod aliquet. Sed blandit gravida tortor, ac molestie augue sodales sed. Morbi bibendum est aliquet dolor porttitor sollicitudin. Nam fringilla et odio vel blandit. Curabitur egestas iaculis odio sit amet volutpat. Aliquam placerat tellus sed turpis tincidunt, et ornare nunc facilisis. Mauris tincidunt ac tortor nec tincidunt. Cras velit nibh, scelerisque a pulvinar consequat, vehicula a sem. Sed ultricies metus sit amet feugiat egestas. Cras eget aliquam sem. Sed sit amet purus dapibus, tristique justo at, lobortis ligula. Nam vitae ligula in magna molestie iaculis. Vivamus gravida placerat dapibus. Mauris eget molestie elit, facilisis rutrum nunc. Vivamus suscipit, nisl sed varius eleifend, dui erat semper diam, vel elementum neque lacus a ante. Nulla varius iaculis egestas. Quisque porttitor lacinia tristique. Aliquam ornare nibh sit amet tortor rhoncus, id accumsan nulla feugiat. Nunc pellentesque consectetur dapibus. Vestibulum sit amet lobortis augue. Cras justo nisl, ultricies molestie congue ut, ultrices et velit. Nam consectetur ligula vehicula consectetur dapibus. Etiam tempor condimentum massa quis dictum. Nunc semper, nunc quis tincidunt auctor, ipsum massa cursus lectus, accumsan posuere lectus magna eget lorem. Maecenas non vehicula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla imperdiet eros at magna mattis, et interdum metus rutrum. Sed semper sed odio sit amet tempor. Aenean sed odio efficitur, congue ligula nec, tempor augue. Nam nec tristique arcu. Aenean aliquam mollis tincidunt. Maecenas et leo quis ex aliquet euismod. Sed et ex eget nisl varius finibus. Aliquam nec lorem in massa venenatis gravida. Quisque non nibh sed diam pretium ultricies in imperdiet nulla. Fusce eget ornare elit. Mauris id mauris eget ante tempus mattis. Nam non aliquam lorem, nec egestas urna. Quisque consequat libero vitae ligula consectetur imperdiet. Vestibulum nec bibendum felis, quis imperdiet dui. Phasellus viverra ornare sem, sit amet rutrum nisi. Maecenas lobortis accumsan ex, at sagittis lectus imperdiet at. Donec vel nulla sem. Praesent quis aliquam arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elitsectetur imperdiet. Vestibulum nec bibendum felis, quis imperdiet dui. Phasellus viverra ornare sem, sit amet rutrum nisi. Maecenas lobortis accumsan ex, at sagittis lectus imperdiet at. Donec vel nulla sem. Praesent quis aliquam arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit </div>
</div>
<div class="footer">footer</div>

和 jQuery

$('a[href="#page-1"').click(function () {
$('.wrapper').animate({
    marginLeft: '0'
}, 1000);
return false;
});
$('a[href="#page-2"').click(function () {
$('.wrapper').animate({
    marginLeft: '-100%'
}, 1000);
return false;
});
$('a[href="#page-3"').click(function () {
$('.wrapper').animate({
    marginLeft: '-200%'
}, 1000);
return false;
});

Answer 1

要使页脚出现在每一页的底部，您必须将其放置在每一页中，而不是将一个页脚放置在所有页面之后。像这样:

<div id="page-1">
    Content for page 1
    <div class="footer">footer</div>
</div>
<div id="page-2">
    Content for page 2
    <div class="footer">footer</div>
</div>
<div id="page-3">
    Content for page 3
    <div class="footer">footer</div>
</div>

这是一个更新的 fiddle :http://jsfiddle.net/qnbBS/33/

所有的 javascript 都在这里发布，所以我将发布用于滚动到第一页的 javascript，你可以弄清楚如何将它应用到其他页面:

$('a[href="#page-1"').click(function () {
    $("#page-1").css("height", "auto");
    $("#page-2").css("height", "auto");
    $("#page-3").css("height", "auto");
$('.wrapper').animate({
    marginLeft: '0'
}, 1000, function () {
    $("#page-2").css("height", "100px");
    $("#page-3").css("height", "100px");
    $("#page-2").css("overflow", "hidden");
    $("#page-3").css("overflow", "hidden");
});
return false;
});

基本上，您希望将所有其他页面的高度设置为 100px，并在动画完成时 overflow hidden ，以便在当前页面不需要时删除滚动条。在动画期间，所有页面的高度都应设置回自动，这样当您横向滚动经过它们时它们看起来很正常。另外不要忘记将除第 1 页之外的所有页面设置为降低页面高度和隐藏页面加载时的溢出:

$(document).ready(function () {
    $("#page-2").css("height", "100px");
    $("#page-3").css("height", "100px");
    $("#page-2").css("overflow", "hidden");
    $("#page-3").css("overflow", "hidden");
});