Asp.net 请参见编辑：CSS3页脚粘贴到页面底部，左列延伸到页脚_Asp.net_Html_Css

Asp.net 请参见编辑：CSS3页脚粘贴到页面底部，左列延伸到页脚

asp.net html css

Asp.net 请参见编辑：CSS3页脚粘贴到页面底部，左列延伸到页脚,asp.net,html,css,Asp.net,Html,Css,经过近六个小时的反复试验，我无法找到解决问题的方法——我以前构建过这个，但无法访问旧文件来查看我所做的事情，并且多年来一直处于不同的职业道路上，不幸的是，我的技能有点衰退我正在建立一个网站来记录我在海上工作的时间，它将有： -高150像素、宽100%的收割台 -高30像素、宽100%的导航条 -一个250px宽的边栏，在导航栏和页脚之间完全伸展，不管里面的内容有多少 -一个article div，位于侧边的右侧，根据视口的宽度填充剩余空间 -如果内容未填充视口，或者如果文本超出视口的限制，则页

经过近六个小时的反复试验，我无法找到解决问题的方法——我以前构建过这个，但无法访问旧文件来查看我所做的事情，并且多年来一直处于不同的职业道路上，不幸的是，我的技能有点衰退

我正在建立一个网站来记录我在海上工作的时间，它将有： -高150像素、宽100%的收割台 -高30像素、宽100%的导航条 -一个250px宽的边栏，在导航栏和页脚之间完全伸展，不管里面的内容有多少 -一个article div，位于侧边的右侧，根据视口的宽度填充剩余空间 -如果内容未填充视口，或者如果文本超出视口的限制，则页脚至少位于页面底部，页脚将位于该页脚下方。我不想要“始终可见”的页脚

我正在使用HTML5和CSS3以及ASP.NET4.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>


船舶数据

非常感谢大家的反馈

编辑：我非常接近一个解决方案。我已经修改了我的代码，使aside和article包含在一个div中，并在对表单、html和body元素进行更改后，将aside的最小高度设置为100%。现在它已扩展到视口的100%，但有一个问题。它实际上是视口高度的100%，而不是容器div高度的100%。页眉/导航栏在页面顶部占180px，页脚在底部占80px。无论视口大小如何，页面都将以240像素的速度滚动。我最初的解决办法是增加利润：180px 0px 80px 0px自动。然而，这并没有解决问题。对上述代码进行编辑以反映更改

我找不到*fiddle服务来演示您的代码。但是，您可能只需要将

位置：fixed

添加到页脚

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

我创造了这个

灵感来源于css-tricks.com

基本概念（HTML）

对于JSFIDLE中的容器本身，我将

display: inline-block;

对于左边类的旁白元素，我把

float: left;

并保持article元素的右类不变，因此它可以扩展宽度。我还为它们提供了以像素为单位的最小高度属性，而不是百分比，这样您可以更好地直观地看到它。

试试下面的代码：

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

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

嘿，贾斯汀，我查看了你的JSFIDLE并应用了那些精确的参数（减去用于演示目的的实际应用程序使用的百分比的固定值），页脚似乎悬停（例如，我可以滚动到它下面的空白处）。文章文本现在环绕着边线，这与我需要的相反，边线并没有完全从导航栏延伸到页脚。我将进一步研究您的示例，以确保我没有遗漏任何内容。我非常感谢您的努力。在进一步检查代码后，我将此标记为答案。基本知识足以使问题的主要主题正常运作。谢谢。嗨，内特，对不起，我没早点说。我很高兴我能帮上忙，谢谢你把它作为答案！不幸的是，这不起作用。我的页脚不见了。我只是想澄清一下，我正在使用ASP.NET 4.5，如果这在这方面有帮助的话-我知道有些事情会产生影响，但我不确定这是否也与此有关。。。谢谢你的回复。和前面的回答一样，这也使页脚消失了。谢谢你的回复。

float: left;

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

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