Question

我是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 {background-color：＃903;保证金：50px; }

.footer {height：4em;背景色：＃103; }

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

Answer 1

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

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

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

Answer 2

尝试这样的事情......

<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 */;

}

Answer 3

我不知道你的需求究竟是什么，但是你的页脚div在表单包装器中，所以它将跟随包装器的高度。

http://jsfiddle.net/7SgGT/ 这是我很快就把它放在一起的东西。这应该让你开始寻找我相信的东西。

HTML页脚问题

3 个答案: