我知道粘性页脚.但我的情况是,我正在开发一个将用于PC和移动设备的网站.因此,显示的页脚由屏幕宽度调整.
页脚的高度会在每个分辨率上发生变化.
任何人都可以知道如何在页面底部(而不是屏幕)显示页脚.某些页面的高度很小,页脚显示在页面之间.
我有以下结构:
<body style="height:100%;">
<div style="height:100%;">
<div id="wrapper" style="height:100%; max-width:800px;">
<div id="header">
some content
</div>
<div id="content">
some content
</div>
<div id="footer" style="position:relative; width:100%;">
some content
</div>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
s.l*_*ers 17
这可能会让事情变得清晰:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}Run Code Online (Sandbox Code Playgroud)
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>Run Code Online (Sandbox Code Playgroud)