3

有人可以帮我在网页中正确定位页脚吗？

我有以下布局：

在此处输入图像描述

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

  • 当内容为空时，页脚应位于页面底部。
  • 当内容超过页面高度时，页脚应该被“下推”。

这是我的 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 结构（例如，除了页脚之外的所有内容都在容器中）。无论我尝试什么，我都会得到一些不起作用的东西（例如，当内容为空时，页脚位于屏幕边界下方，或者当内容超出页面时不会向下移动）。

更新

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

大多数人似乎将我指向他们在 Google 上找到的教程（如前所述，我已经阅读了其中的大部分内容并且已经尝试对其进行改编）。

我得出的结论是，我将不得不重组我的 HTML 以使其正常工作；我的问题的重点是如何使用我已经拥有的 HTML 来做到这一点？关注点分离就这么多！

4

6 回答 6

2

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

http://www.cssstickyfooter.com/

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

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

于 2012-08-14T15:26:10.427 回答
2

我做了一个小提琴： http: //jsfiddle.net/karlroos/ZVkYC/（对不起，组织不好的CSS）

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

于 2012-08-14T15:29:38.573 回答
0

将您的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;
}
于 2012-08-14T15:16:01.513 回答
0

您是否尝试过将 body 设置为 withposition:relative并将页脚设置为position:absolutewith bottom:0？

于 2012-08-14T15:19:57.570 回答
0

尝试编辑您的 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;
}

然后在页脚中调用它。

于 2012-08-14T15:25:45.973 回答
0

正如我在帖子的编辑中提到的，我最终不得不稍微改变我的 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 （这个相同的链接是由几个人发布的，但我已经在使用它了！）

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

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

更新

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

#footer {
    margin-top: -151px;
    height: 150px;
}
于 2012-08-14T19:24:15.933 回答