如何在不滚动的情况下使此页眉和页脚可见？
Posted
技术标签:
【中文标题】如何在不滚动的情况下使此页眉和页脚可见？【英文标题】：How to make this header and footer visible without scrolling? 【发布时间】：2014-09-21 13:18:42 【问题描述】：我正在编写一个 Web 应用程序。我希望页面适合浏览器，以便页眉和页脚始终位于浏览器的顶部和底部，无需滚动。
我已经能够在当前版本的 Fire Fox、Chrome 和 Internet Explorer 上执行此操作。但我无法让它在 iPad 上运行。在横向中，iPad 会完美地缩放网站的宽度，以便适合整个网站的宽度，但您需要进行少量滚动才能看到页脚。当 iPad 以纵向放置时，我得到相反的结果。无需滚动即可看到整个网站的高度，但现在您必须水平滚动才能看到完整的标题。
以下是代码示例： http://jsfiddle.net/v8mkygcw/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Blank</title>
<style type="text/css">
bodymargin:0;
#site-links height:20px; background:#FAFAFA; min-width:932px; border-bottom:solid 1px #A0A0A0;
.site-link color:#919191; float:left; padding-right:6px; border-right:solid 1px #c7c7c7; margin-right:6px;
#hdr-width max-width:1040px; min-width:640px; margin:0 auto;
#mainposition:absolute; top:21px; bottom: 0; left:0; right:0; overflow:hidden; text-align:center;
#content position:absolute; top: 0; bottom: 21px; right:0; left:0; overflow:hidden; overflow-y:auto;
#footer position:absolute; left:0; right:0; bottom:0; height:20px; background:#F8F8F8;border-top:solid 1px #A0A0A0;
</style>
</head>
<body>
<div>
<div id="site-links">
<div id="hdr-width">
<a class="site-link">Link1</a>
<a class="site-link">Link2</a>
<a class="site-link">Link3</a>
</div>
</div>
<div id="main">
<div id="content">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>
非常感谢任何帮助。谢谢！
【问题讨论】：
【参考方案1】：.site-links 有一个min-width:932px;
这告诉浏览器，无论窗口大小，div 至少应该有 932px，所以滚动出现。从 css 中删除该行。
http://jsfiddle.net/v8mkygcw/1/
【讨论】：
【参考方案2】：您可以通过给它们固定位置来创建粘性页眉和页脚：
#site-links position:fixed; left:0; right:0; top:0; height:20px; z-index:1000; background:#FAFAFA; border-bottom:solid 1px #A0A0A0;
#footer position:fixed; left:0; right:0; bottom:0; height:20px; z-index:1000; background:#F8F8F8;border-top:solid 1px #A0A0A0;
在这个fiddle body 的高度设置为 1000px 只是为了演示
【讨论】：
【参考方案3】：只需将position:absolute 更改为position:fixed
bodymargin:0;
#site-links height:20px; background:#FAFAFA; min-width:932px; border-bottom:solid 1px #A0A0A0;
.site-link color:#919191; float:left; padding-right:6px; border-right:solid 1px #c7c7c7; margin-right:6px;
#hdr-width max-width:1040px; min-width:640px; margin:0 auto;
#mainposition:fixed; top:21px; bottom: 0; left:0; right:0; overflow:hidden; text-align:center;
#content position:absolute; top: 0; bottom: 21px; right:0; left:0; overflow:hidden; overflow-y:auto;
#footer position:fixed; left:0; right:0; bottom:0; height:20px; background:#F8F8F8;border-top:solid 1px #A0A0A0;
<div>
<div id="site-links">
<div id="hdr-width">
<a class="site-link">Link1</a>
<a class="site-link">Link2</a>
<a class="site-link">Link3</a>
</div>
</div>
<div id="main">
<div id="content">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
</div>
<div id="footer">Footer</div>
</div>
</div>【讨论】：
我很想试试这个。但我刚刚将我的 iPad 更新到 ios 8.0，现在我的原始代码可以正常工作。我认为这是刚刚修复的移动 Safari 的一个错误。以上是关于如何在不滚动的情况下使此页眉和页脚可见？的主要内容，如果未能解决你的问题，请参考以下文章