Question

我正在编写一个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>

我真的很感激任何帮助。谢谢！

Answer 1

.site-links有min-width:932px;

这对浏览器说，无论窗口大小，该div至少应该有932px，所以滚动出现。从css中删除该行。

http://jsfiddle.net/v8mkygcw/1/

Answer 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身体的高度设置为1000px只是为了演示

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

如何在不滚动的情况下显示此页眉和页脚？

3 个答案: