Question

经过近六个小时的反复试验，我无法为我的问题找到解决方案 - 我之前已经构建了这个解决方案，但是无法访问旧文件以查看我做了什么，并且处于不同的职业生涯中多年来的道路，不幸的是我的技能已经消退了一点。

我正在建立一个网站，记录我在海上工作的时间，它将有： - 标题高150像素，宽100％ - 导航条高30像素，宽100％ - 一个250px宽的旁边，在导航栏和页脚之间完全伸展，无论其中的内容有多少 - 一个文章div，它将在旁边的右侧填充留下的剩余空间，具体取决于视口的宽度 - 如果内容未填充视口，则至少位于页面底部的页脚，或者如果文本超出视口的限制，则它将低于该范围。我不想要一个“始终可见”的页脚。

我正在使用HTML5和CSS3以及ASP.net 4.5。

我目前有标题，导航和文章以我想要的方式工作。但是，我不知道如何处理旁边和页脚。

我希望页脚位于页面底部。显然，如果我有一个没有太多文字的页面，它将在浏览器屏幕的一半，而且，众所周知，这看起来很业余和荒谬。所以我希望它像一个普通的网页一样位于屏幕的底部。虽然我在这里，但我也希望我能够在浏览器窗口的左侧填充250px宽的条带，无论其中有多少内容，一直到页脚，所以它看起来更完整。

现在，正如我所指出的那样，在过去的六个小时里，我一直在努力，并且已经取得了一些进展，但这两个问题我似乎无法解决。我已经使用这个论坛寻求帮助，几乎所有事情都没有成功。令人沮丧的是，我知道我之前在短短几分钟内完成了这么多次，但是我在凌晨4点。

这是CSS：

    * 
{
    margin: 0;
}
body 
{
    margin: 0px auto;
    height: 100%;
}

form, html
{
    height: 100%;
}

header
{
    margin: 0px auto; 
    background-color: #1041a2;
    background-image: url(../Images/headerHCJ.png);
    background-repeat: no-repeat;
    background-position-x: right;
    height: 150px;
    position: relative;
}

#logo
{
    margin: 0px auto;
    float: left;
    height: 150px;
    width: 150px;
    background-image: url(../Images/usmmSeal130.png);
    background-repeat: no-repeat;
    background-position: center; 
}

#title
{
    margin: 0px auto;
    color: white;
    position: absolute;
    bottom: 45px;
    padding-left: 150px;
}

#title h1
{
    margin: 0px auto;
    font-family: Arial;
    text-shadow: 5px 5px 5px black;
}

#title h2
{
    margin: 0px auto;
    font-family: Arial;
    text-shadow: 5px 5px 5px black;
}

nav
{
    background-image: url(../Images/nav.png);
    font-family: Arial;
    color: white;
    background-repeat: repeat-x;
    height: 30px;
    width: 100%;
    line-height: 30px;
    margin: 0px auto;

}

#content 
{
    margin: 0px auto;
    height: 100%;
}

aside 
{
    margin: 180px 0px 80px 0px auto;
    float: left;
    width: 250px;
    background-color: gray;
    height: 100%;
}

article
{
    margin: 0px auto;
    padding-left: 250px;
    min-height: 100%;
}

footer {
    height:80px;
    background: black;
    clear: both;
}

这是我的HTML

<body>
    <form id="form1" runat="server">
        <header>
            <div id="logo">
            </div>
            <div id="title">

            </div>
        </header>
        <nav>

        </nav>
        <div id="content">
            <aside>
                Vessel data
            </aside>
            <article>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </article>
        </div>
        <footer>

        </footer>
    </form>
</body>

非常感谢您的反馈。

编辑：我非常接近解决方案。我修改了我的代码，以便将div和article包含在div中，并在对form，html和body元素进行更改后将其设置为100％的min-height。它现在扩展到视口的100％，有一个问题。它通常是视口RATHER的高度100％，而不是容器div高度的100％。页眉/导航栏在页面顶部占据180px，页脚在底部占据80px。无论视口大小如何，页面都将滚动240像素。我最初的解决方法是增加保证金：180px 0px 80px 0px auto。然而，这并没有解决问题。编辑上面的代码以反映更改。

Answer 1

我找不到用你的代码演示的*小提琴服务。但是，您可能只需要将position: fixed添加到页脚。

footer {
position: fixed;
height:80px;
background: black;
clear: both;
}

Answer 2

我创建了这个jsfiddle。

灵感来自css-tricks.com上的article。

基本概念（HTML）

<div class="content">
    Content
</div>
<footer>
    I'm a footer
</footer>

CSS

html, body {
      height: 100%;
}
#content {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -80px; 
}
#content:after {
     content: "";
     display: block;
}
footer, #content:after {
     /* .push must be the same height as footer */
    height: 80px; 
 }
 footer {
    background: black;
}

对于jsFiddle本身的容器，我把

display: inline-block;

对于左派的旁边元素，我把

float: left;

并保留了右侧类的文章元素，因此可以扩展宽度。我还给了他们像素的最小高度属性，而不是百分比，所以你可以在视觉上更好地看到它。

Answer 3

试试这段代码：

header {
    height: 200px;
    width: 100%;
    background-color: red;
}

footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: blue;
}

<强> Demo here

SEE EDIT：CSS3页脚粘贴在页面底部，左栏延伸到页脚

3 个答案: