水平 div 上的自动页面高度
auto page height on horizontal divs
我有一个单页网站，其中的部分水平排列。
我遇到的问题是，我希望页面的大小与当前 div 的内容相同，但页面高度设置为最大 div 的高度，并且在较小的 div 上有一个巨大的页脚。
我曾尝试在 div 上使用高度自动，但这似乎没有任何区别
这是一个演示：http://jsfiddle.net/qnbBS/30/
以及水平扫描的实例 divs：live example
您可以看到第 3 页有大量文字，页脚位于页面底部，但在第一页和第二页上，页脚很大以填补空白。
我正在尝试找到一种使页脚大小相等（比如 75px）的方法，因此它位于每个页面的底部，并且在内容较少的页面上没有额外的 space。
匹配演示的代码
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;
});
将此 CSS 放入您的代码中：
.wrapper {
width: 300%;
height: auto;
background: #263729;
overflow: hidden;
}
.page {
width: 33.3333%;
float:left;
background: #992213;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
.footer {
background: red;
float: left;
width: 100%;
}
要使页脚出现在每一页的底部，您必须将其放置在每一页中，而不是将一个页脚放置在所有页面之后。像这样：
<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 到 post 很多，所以我将 post 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 并在动画完成时隐藏溢出，以便在当前页面不需要时删除滚动条。在动画期间，所有页面的高度都应设置回自动，这样当您横向滚动经过它们时它们看起来很正常。也不要忘记将除第 1 页以外的所有页面设置为页面加载时降低的高度和隐藏的溢出：
$(document).ready(function () {
$("#page-2").css("height", "100px");
$("#page-3").css("height", "100px");
$("#page-2").css("overflow", "hidden");
$("#page-3").css("overflow", "hidden");
});
我对页脚、正文和包装器做了一些更改class，这就是您想要的。
Css :
html , body {
height: 100%;
margin: 0;
overflow-x:hidden;
}
.wrapper {
width: 300%;
height: auto;
max-height: 100%;
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 {
width: 100%;
height: 80px;
position:absolute;
bottom:0;
background:red;
}
.simulate {
height:auto;
}
勾选fiddle
我有一个单页网站，其中的部分水平排列。
我遇到的问题是，我希望页面的大小与当前 div 的内容相同，但页面高度设置为最大 div 的高度，并且在较小的 div 上有一个巨大的页脚。
我曾尝试在 div 上使用高度自动，但这似乎没有任何区别
这是一个演示：http://jsfiddle.net/qnbBS/30/
以及水平扫描的实例 divs：live example
您可以看到第 3 页有大量文字，页脚位于页面底部，但在第一页和第二页上，页脚很大以填补空白。 我正在尝试找到一种使页脚大小相等（比如 75px）的方法，因此它位于每个页面的底部，并且在内容较少的页面上没有额外的 space。
匹配演示的代码
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;
});
将此 CSS 放入您的代码中：
.wrapper {
width: 300%;
height: auto;
background: #263729;
overflow: hidden;
}
.page {
width: 33.3333%;
float:left;
background: #992213;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
.footer {
background: red;
float: left;
width: 100%;
}
要使页脚出现在每一页的底部，您必须将其放置在每一页中，而不是将一个页脚放置在所有页面之后。像这样：
<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 到 post 很多，所以我将 post 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 并在动画完成时隐藏溢出，以便在当前页面不需要时删除滚动条。在动画期间，所有页面的高度都应设置回自动，这样当您横向滚动经过它们时它们看起来很正常。也不要忘记将除第 1 页以外的所有页面设置为页面加载时降低的高度和隐藏的溢出：
$(document).ready(function () {
$("#page-2").css("height", "100px");
$("#page-3").css("height", "100px");
$("#page-2").css("overflow", "hidden");
$("#page-3").css("overflow", "hidden");
});
我对页脚、正文和包装器做了一些更改class，这就是您想要的。
Css :
html , body {
height: 100%;
margin: 0;
overflow-x:hidden;
}
.wrapper {
width: 300%;
height: auto;
max-height: 100%;
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 {
width: 100%;
height: 80px;
position:absolute;
bottom:0;
background:red;
}
.simulate {
height:auto;
}
勾选fiddle