固定页脚 - 滚动条问题

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>