固定頁腳 - 滾動條問題

Question

基本上我有一個aspx頁面，我在主要區域顯示某些東西，然後我想要始終顯示在底部（固定）的某種頁腳。

我成功地做到這一點，但什麼是關於我的，如果滾動條的右側出現似乎爲整個頁面，但我想它是隻爲wrapper（主要內容）不footer的一部分 - 因爲這看起來不合邏輯，因爲頁腳是固定的，滾動條不是它的任何業務。

例子：jsfiddle

#wrapper{  
     width: 100%; 
     height: 100%; 
     margin-bottom: 50px; 
     padding: 7px; 
     background-color: #9eebec; 
    } 

    #footer{ 
     position: fixed; 
     width:100%; 
     height: 50px; 
     bottom: 0px; 
     left: 0px; 
     right: 0px; 
     overflow-y:auto; 
     background-color: #bedd9d; 
     padding: 7px; 
    } 

• 有沒有一種方法，我怎樣才能使它看起來像第二個屏幕？
• 是否必須禁用整個page/body的滾動並使wrapper溢出？ - 我可以做到這一點沒有固定的高度？
• 是否有可能通過CSS（無javascript）做到這一點？
• 什麼是大多數正確/合法/有效的方式來做到這一點？

Answer 1

請檢查下面的例子：

#wrapper{  
     width: 100%; 
     height: 80%; 
     margin-bottom: 50px; 
     overflow-y: scroll; 
     background-color: aqua; 
     position: fixed; 
     padding: 3px; 
    } 

    .main { 
     overflow: hidden; 
    } 

    #footer{ 
     position: fixed; 
     width:100%; 
     height: 20%; 
     bottom: 0px; 
     left: 0px; 
     right: 0px; 
     overflow-y:auto; 
     background-color: #e5ffb3; 
     padding: 7px; 
    } 

我分高80:20

https://jsfiddle.net/fuwhx8jy/1/

Answer 2

您可以嘗試添加這些CSS規則：

*{ 
    padding: 0; 
    margin: 0; 
} 
html, body{ 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

這將確保身體得到100%寬度和高度並沒有滾動，因爲我們將處理子元素的溢出。

而且這個規則overflow-y:auto;既#wrapper和#footer

您必須將高度 爲了不隱藏任何內容設置到包裝calc(100% - 78px)。 78px是頁腳 高度爲50px加上填充設置爲7px * 4的結果（由於頂部和底部填充爲包裝和頁腳，所以它乘以4 ）。

請參閱下面的代碼片段：

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
html, body{ 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
}   
 
#wrapper{  
 

 

 
width: 100%; 
 
\t height: calc(100% - 78px); /* you have to subtract 78px = 50 + 4*7px because of the divs padding set to 7px */ 
 
\t margin-bottom: 50px; 
 
\t padding: 7px; 
 
\t background-color: #9eebec; 
 
\t overflow-y:auto; 
 
} 
 

 
#footer{ 
 
\t position: fixed; 
 
\t width:100%; 
 
\t height: 50px; 
 
\t bottom: 0px; 
 
\t left: 0px; 
 
\t right: 0px; 
 
\t overflow-y:auto; 
 
\t background-color: #bedd9d; 
 
\t padding: 7px; 
 
}

<div id="wrapper"> 
 
<h1>Main content</h1> 
 
<p> 
 
Usurper we do not sow, the wall warrior, bloody mummers m'lady ours is the fury et dolore magna aliqua. Trencher enim ad your grace, quis nostrud exercitation ullamco laboris nisi green dreams slave let me soar. Full of terrors dolor in reprehenderit in seven hells honed and ready flagon pride and purpose. The last of the dragons wench, coin in culpa mare's milk mulled wine suckling pig never resting. 
 
</p> 
 
<p> 
 
Moon and stars throne. Smallfolk prince moon-flower juice odio. Nullam garrison, a taste of glory, always pays his debts, king luctus magna felis spiced wine. Tread lightly here nuncle destrier ever vigilant. Our sun shines bright risus vulputate vehicula. Arbor gold rouse me not. The wall. Night's watch, mace take the black, death before disgrace cold, work her will bloody mummers flagon. Coin honeyed locusts murder. Donec fermentum. Pellentesque your grace your grace. Duis sapien sem, old bear, mare's milk, maidenhead quis, smallfolk. The seven, sellsword chamber green dreams, seven hells moon-flower juice, coopers malesuada diam lacus mulled wine. Moon dog scelerisque nunc. Gargoyles gallant. Aliquam consequat. You know nothing, sandsilk king, greyscale et, ice feast, nisi. None so dutiful, mollis dungeon, spiced wine, arbor gold, warrior. Let me soar honeyed locusts. 
 
</p> 
 
<p> 
 
Never resting, none so wise cloak, nisl turpis steel cold, sed placerat we light the way. Crypt no song so sweet. Suckling pig drink, your king commands it. Your grace bannerman. Nuncle the wall coin. The seven full of terrors. Old bear pride and purpose. Mauris dictum, dwarf honed and ready, let it be written, flagon mare's milk none so fierce. Mulled wine. Feast vitae metus. Trencher tristique neque eu others. Quisque gravida ipsum non sapien. Chamber turpis destrier, green dreams, tunic at, seven hells, quam. Arbor gold your grace. Righteous in wrath never resting. Mace spiced wine nuncle. Honeyed locusts. The wall. Motley semper old bear. 
 
Brothel nonummy, moon and stars godswood, usurper sorcery bloody mummers, feed it to the goats blood servant. Coin sun. Tread lightly here, dapibus sed, night's watch, suckling pig, king. Tourney quis lacus. As high as honor. Mare's milk quam eu velit. Donec euismod vestibulum m'lady. Maid arbor gold. Though all men do despise us. Mulled wine craven seven hells. Take the black. Spider green dreams brother senectus et milk of the poppy clansmen spiced wine. In hac habitasse platea summerwine. Ever vigilant. He asked too many questions. Slave arbor gold at augue bibendum dapibus. 
 
</p> 
 
<p> 
 
Spare me your false courtesy. Moon-flower juice crimson, neeps crows, honeyed locusts, spiced wine, chamber. Morbi consectetuer luctus felis. Donec vitae nisi. Milk of the poppy. Duis sed elit suckling pig mare's milk. Never resting, winter is coming throne, you know nothing manhood, let me soar full of terrors. Pride and purpose in metus. Stag old bear. Proin justo. Wolf joust cloak. Mulled wine. Work her will. 
 
Nightsoil usurper, we do not sow, green dreams seven hells, ward egestas sem ligula prince goblet. Murder night's watch maid garron. Sed posuere vestibulum clansmen. Craven beware our sting. Arbor gold. Integer sit amet mauris imperdiet coin ever vigilant. Death before disgrace. Nulla facilisi. Maidenhead tower whore, spiced wine, suckling pig, the seven, ice. In his cups, honeyed locusts, your grace, your grace, m'lady. Steel brother purus. Destrier sorcery. None so fierce. 
 
</p> 
 
<p> 
 
Duis volutpat elit et erat. Greyscale moon-flower juice never resting old bear. Lord of light half-man. Night's watch take the black. Nulla honed and ready. Bannerman green dreams. Ever vigilant beast. Etiam lacus lorem, you know nothing, coin tunic, bloody mummers amet, fire. Court full of terrors usurper aliquam pretium. Mare's milk sword, mulled wine, seven hells, suckling pig, risus. Dog smallfolk enim nec sem. No foe may pass. No foe may pass rouse me not. Death let me soar. Mauris urna diam, betrothed goblet, weirwood crimson, pride and purpose, warg. Curabitur eu felis. Lamprey fool mi. Winter is coming, wolf tunic, spiced wine, honeyed locusts, moleskin. Arbor gold warrior, darkness betrothed, your grace, ultricies id, godswood. 
 
</p> 
 

 

 
</div> 
 

 
<div id="footer"> 
 
Footer content which might be too big soometimes so I need it to overflow - have it's own scrollbar. 
 
<p> 
 
Baseborn mulled wine sit amet, full of terrors, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Night's watch ad minim veniam, quis nostrud exercitation ullamco tread lightly here aliquip ex ea commodo consequat. We light the way though all men do despise us he asked too many questions gallant. Green dreams maid cupidatat non king, sunt in culpa qui officia deserunt mollit as high as honor. 
 
Moon-flower juice spiced wine. Nulla gravida orci a garrison. Ever vigilant, neeps suckling pig pharetra, est honeyed locusts pavilion, nec luctus magna felis sollicitudin mauris. Mare's milk mauris eu nibh euismod gravida. Duis your grace seven hells arbor gold. Donec lobortis risus a elit. The wall. Ut ullamcorper, ligula m'lady tempor congue, work her will raiders, id tincidunt sapien you know nothing. Dungeon old bear tunic. Moleskin fermentum. Pride and purpose mulled wine. None so wise, moon-flower juice, sellsword maester, consequat quis, warg. Aliquam faucibus, winter is coming manhood, a taste of glory, the seven milk of the poppy. Cras mollis scelerisque nunc. Green dreams. Honeyed locusts. None so dutiful, dapibus quis, coopers et, spiced wine, dirk. Beast your grace, mollis quis, seven hells, ever vigilant, maegi. Moon and stars arbor gold. 
 
</p> 
 
</div>