высота автостраницы на горизонтальных divs

Question

У меня есть сайт с одной страницей, разделяющий по горизонтали.

Проблема заключается в том, что я хочу, чтобы страница была размером с содержимым текущего div, но высота страницы устанавливается на высоту самого большого div, а на меньших divs - огромный нижний колонтитул ,

Я пытался использовать высоту авто на дивы, но это не кажется, что никакой разницы

Heres демо: http://jsfiddle.net/qnbBS/30/

и живой пример с горизонтальными широкими дивы: 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> 

Вот обновленная скрипка: 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"); 
}); 

Answer 2

Поместите этот 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%; 
} 

Answer 3

Я сделал некоторые изменения в колонтитуле, тело и обертке классе, и это то, что вы хотите.

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