水平div上的自动页面高度

时间：2015-02-04 18:43:08

标签： jquery html css height

我有一个单页网站，其中的部分横向扫描。

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

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

继承人演示：http://jsfiddle.net/qnbBS/30/

以及横向扫描div的实时示例：live example

你可以看到页面3有大量的文本，页脚位于页面的底部，但是在第一页和第二页，页脚很大，可以填补空白。 我试图找到一种方法使页脚大小相等（比如75px），因此它位于每页的底部，因此在内容较少的页面上没有额外的空间。

匹配演示的代码

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;
});

3 个答案:

答案 0 :(得分：2)

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

<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>

这是一个更新的小提琴：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并在动画完成时隐藏溢出，这样如果当前页面不需要滚动条就会被删除。在动画期间，所有页面的高度都应设置为自动，因此当您向侧面滚动时，它们看起来很正常。另外，请不要忘记将除第1页以外的所有页面设置为页面加载时降低的高度和隐藏溢出：

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

答案 1 :(得分：0)

将此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%;
}

答案 2 :(得分：0)

我在页脚，正文和包装类中做了一些更改，这就是你想要的。

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

相关问题
最新问题