如何在不滚动的情况下使此页眉和页脚可见？答案

【问题标题】：How to make this header and footer visible without scrolling?如何在不滚动的情况下使此页眉和页脚可见？
【发布时间】：2023-03-11 17:20:02
【问题描述】：

我正在编写一个 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">
        body{margin: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;}

        #main{position: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>

非常感谢任何帮助。谢谢！

【问题讨论】：

标签： html ios css ipad

【解决方案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

  body{margin: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;}

        #main{position: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 的一个错误。