2

我正在关注本教程链接，但不知道如何将页脚放在页面底部，因此当用户打开页面时，无论显示器大小如何，页脚都位于页面的最底部。

这样当他们改变窗口大小或使用更大的显示器时，页脚应该在页面的末尾。

重要的部分是我的内容部分没有太多文本，因此滚动条在任何尺寸的显示器中都应该是不可见的。（那些不是很小的）

*另请注意，我已经查看了上一个问题，但找不到正确答案。* 如果您知道任何其他教程，我将不胜感激您的建议。（我需要浮动布局）

布局 

 container
    {
       header
       content
       { 
         leftnav | rightnav
       }
       footer
    }

CSS

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
4

4 回答 4

0

在本教程中，页脚位于container div. 如果您从容器中移除，width:90%该示例将在整个屏幕宽度上呈现。

于 2013-03-14T13:43:16.230 回答
0

使用粘性包装 jQuery 插件，或在 -ve 中使用position: fixedwith bottom: 5%and和 margin-left 值。left: 0

于 2013-03-16T21:44:14.407 回答
0 
<footer style="background-color: crimson; color:springgreen; font-family: serif; text-align: center; font-size: 15px; position:absolute; width: 99.82%;margin-left: -6px; margin-right: -6px;"><h1>THIS IS MY FOOTER</h1></footer>

浏览器：谷歌浏览器

系统屏幕： 15.6"

我体验过我们的 div、页眉、页脚和导航的外观因屏幕而异，并且可能因浏览器而异。

于 2019-10-04T06:18:33.100 回答
-1

试试这个 ： 

#footer{
        position: absolute;
        bottom: 0px;
        height: 50px;
        width: 100%;
    }
于 2013-03-14T13:37:15.870 回答