html页脚问题答案

【问题标题】：html footer problemhtml页脚问题
【发布时间】：2011-11-03 20:10:59
【问题描述】：

我是 html 新手，我在添加页脚时遇到了一些问题。更具体地说，当我添加页脚时，“表单”会被拉到页脚 - 就像这样 http://tinypic.com/view.php?pic=jhbw5g&s=7 。我怎样才能阻止它扩展表单的主体？

html代码

<body>
    <div id="formWrapper">
            </center>
          <form method ="post" action="addMember.php">
          <label for="name">Username:</label>
          <input name="name"/>
          <label for="password">Password:</label>
          <input name="password"/>
          <label for="email">Email:</label>
          <input name="email"/>
            <p>
            <fieldset>
            <input class="btn" name="submit" type="Submit" value="Register"/>
            <input class="btn" name="reset" type="reset" value="Clear Form">
            </fieldset>
      </form>

     <div class="push"></div></div>
         <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
</body>

样式表

#formWrapper{
    width:400px;
    border:solid 5px #F1F1F1;
    margin-top:300;
    margin-bottom:10;
    margin-right: auto;
    margin-left: auto;
    background-color: #AFC8DE;
    padding-top: 10px;

    min-height: 100%;
    height: auto !important;
    height: 100%;   

}

html, body { 高度: 100%; }

.push{ 背景颜色：#903;边距：50px； }

.footer { 高度：4em;背景颜色：#103； }

更具体地说，min-height: 100%; 让它拖了出来，但不确定如何修复它。

【问题讨论】：

标签： html css stylesheet

【解决方案1】：

我不知道您的具体需求是什么，但您的页脚 div 位于表单包装器中，因此它将遵循该包装器的高度。

http://jsfiddle.net/7SgGT/ 这是我快速整理的内容。我相信这应该可以帮助您开始寻找您正在寻找的东西。

【讨论】：

【解决方案2】：

您发布的 HTML 代码中存在一些问题。

没有开始的“中心”结束标签
第二个“输入”标签没有关闭
空的 div.push 标签？
缩进看起来没有（可能是由于 stackoverflow 格式？）

如果问题未解决，请重新检查您的 HTML 并使用更新的 HTML 编辑问题。

【讨论】：

【解决方案3】：

试试这样的..

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

和 CSS..

html, body {margin:0; padding:0; height:100%;}
#container {min-height:100%; position:relative;}
#body {padding:10px; padding-bottom:60px; /* Height of the footer */}
#footer {position:absolute; bottom:0; width:100%; height:60px;   /* Height of the footer */;

}

【讨论】：