Question

有人可以帮我正确地将我的页脚放在我的网页上吗？

我有以下布局：

enter image description here

这就是我希望页脚的行为方式：

当内容为空时，页脚应位于页面底部。
当内容超出页面高度时，页脚应“向下推”。

这是我的HTML：

<html>
    <head>
        <title>@ViewBag.Title</title>
    </head>

<body>

/* This is outside of the container as I want the background 
   to stretch across the top of the webpage */
<div id="menu">
    <div>
       /* This contains an unordered list which is restyled as a series of links.
          The reason it is contained in inside the menu div is because I want this
          content to be centred. /*
    </div>
</div>

<div id="page-container">

        <div id="header">
            <h1>Website title</h1>
        </div>

        /* This is floated to the left of the content area. */
        <div id="content">
            @RenderBody()
        </div>

         /* This is floated to the right of the content area. */
        <div id="sidebar">
            @RenderSection("sidebar", false)
        </div>

</div>

<div id="footer">
    My footer content goes here.
</div>

请注意以下事项：

内容和标题包含在名为“page-container”的“Div”中。
内容由两个分布在内容区左右两侧的Div组成。
菜单位于页面容器div之外。这是因为我希望菜单背景能够跨越页面顶部（如Stackoverflow菜单）

我知道Stackoverflow上有许多类似的问题，Google搜索会返回大量结果。

我在尝试调整我发现的样本时注意到的事情是它们通常依赖于一个非常特定的html结构（E.G.除页脚在容器中的所有内容）与我的不匹配。无论我尝试什么，我最终会得到一些不起作用的东西（E.G.当内容为空时，页脚位于屏幕边界下方，或者当内容超出页面时，页脚没有向下移动）。

更新

我可以让我的页脚粘到页面底部，但是当我的内容扩展时它不会被推下来。我认为这是因为我的内容由两个浮动元素组成。

大多数人似乎都指着他们在Google上找到的教程（如前所述，我已经阅读了大部分内容，并且已经尝试过这些教程）。

我得出结论，我将不得不重构我的HTML以使其工作;我的问题是如何使用我已有的HTML做到这一点？分散关注点太多了！

Answer 1

快速谷歌搜索给了我一些你会发现有用的链接。

http://www.cssstickyfooter.com/

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

我会坚持使用第一个，但要么应该做你想要的。

Answer 2

我做了一个小提琴：http://jsfiddle.net/karlroos/ZVkYC/（对于组织严密的CSS感到抱歉）

看一看。您必须为旧版本的IE中的min-height: 100%;做一些解决方法，大概是使用JavaScript。

Answer 3

将div - s包装在包装器中：

#wrapper {
  width:100%;
  height:500px;
  background:#ccc;
  margin:auto;
  position:relative;
}

并为您的页脚使用以下CSS：

#footer {
   width: 100%;
   height: 80px;
   background-color: #ccc;
   position:absolute;
   bottom: 0;
}

Answer 4

您是否尝试使用position:relative将正文设置为position:absolute，将页脚设置为bottom:0？

Answer 5

尝试编辑CSS以包含以下内容：

#footer {
width: 710px;
height: 50px;
margin: 0 auto;
padding: 40px 0 0 0;
}

#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}

#footer a {
text-decoration: underline;
}

#footer a:hover {
text-decoration: none;
}

然后在你的页脚中调用它。

Answer 6

正如我在帖子的编辑中所提到的，我最终不得不稍微改变我的HTML：

<body>
    <div id="page-container" >
        <div id="menu">
            <div>

            </div>
        </div>

        <div id="layout-container">

            <div id="header">
                <h1>Website title</h1>
            </div>

            <div id="content">
                @RenderBody()
            </div>

            <div id="sidebar">
                @RenderSection("sidebar", false)
            </div>

        </div>
    </div>

<div id="footer">

</div>

我的CSS基于找到的CSS here（同样的链接是由几个人发布的，但我已经在使用它了！）

该解决方案的效率约为99％。当内容区域为空时，我的页脚会粘到页面底部，当内容比屏幕大时，我的页脚也会向下推，但我现在有一个永久滚动条，因为我的页面高度似乎已关闭（移动鼠标滚轮滚动）页面上下单个像素。）

到目前为止，我还是无法摆脱这种情况，所以我不情愿接受这个作为一个完整的解决方案，除非其他人能指出我正确的方向。

<强>更新

似乎1像素偏移是由我的页脚具有1像素顶部边框引起的。我只是调整我的CSS来解决这个问题，当内容没有完全填满屏幕时滚动条就会消失。

#footer {
    margin-top: -151px;
    height: 150px;
}

如何使用CSS正确定位页脚？

6 个答案: