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

您可以尝试添加这些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 因为包装和页脚的顶部和底部填充。）

请参阅下面的代码：

＆＃13;

*{
  padding: 0;
  margin: 0;
}
html, body{
  height: 100%;
  width: 100%;
  overflow: hidden;
}        
#wrapper{    


width: 100%;
	height: calc(100% - 78px);  /* you have to subtract 78px = 50 + 4*7px because of the divs padding set to 7px */
	margin-bottom: 50px;
	padding: 7px;
	background-color: #9eebec;
	overflow-y:auto;
}

#footer{
	position: fixed;
	width:100%;
	height: 50px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow-y:auto;
	background-color: #bedd9d;
	padding: 7px;
}

＆＃13;

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

＆＃13;

Answer 2

请查看此示例：

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

固定页脚 - 滚动条问题

2 个答案: