ASP.NET Div 布局 - CSS 粘滞页脚答案

【问题标题】：ASP.NET Div Layout - CSS Sticky FooterASP.NET Div 布局 - CSS 粘滞页脚
【发布时间】：2014-11-25 16:41:36
【问题描述】：

我会先道歉，因为我知道这个问题已经被问了无数次，但我已经尝试了所有我发现的方法都无济于事。 :(

仅供参考：我正在尝试使用母版页创建一个 ASP.NET Web 应用程序。以下所有 HTML 代码均来自我的 MP。

我有 3 个问题：

到底如何让我的页脚粘住（我的失败代码将在下面）？
在下面的设置中，我在页眉/内容等中嵌套了 div。我假设这不会影响我将页脚粘贴到底部的史诗之旅？
最后，我的 (body) 标签后面有 (form) 标签。我知道其他人提到他们觉得好像有问题。我也觉得它影响了我粘页脚的能力……但也许这是我的菜鸟本能产生的一种非理性的恐惧……哈哈。

提前感谢您抽出时间帮助我！

CSS

* {
  margin: 0;
}
html,
body {
  font-family: Arial;
  font-size: 10pt;
  background-color: #F2FDFF;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  text-align: center;
  padding: 0;
  height: 100%;
}
a {
  outline: none;
}
#wholePg {
  min-height: 100%;
  position: relative;
}
#divNav-cont {
  width: 100%;
  position: fixed;
  top: 0px;
}
#divNav {
  background-color: #DBDBDB;
  margin-bottom: 5px;
  margin-top: 0;
  height: 100px;
  width: 800px;
  text-align: center;
  font: 0/0a;
  vertical-align: middle;
  display: table;
  border-radius: 0px 0px 25px 25px;
}
#divBody {
  width: 98%;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 110px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  padding-bottom: 40px;
}
#divFooter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  border-radius: 25px 25px 0px 0px;
  background-color: #DBDBDB;
}

HTML

<body>
  <form runat="server">
    <div id="wholePg">

      <%--Navigation--%>
        <div id="divNav-cont">
          <div id="divNav">
            <div id="imgNav">

            </div>
          </div>
        </div>

        <%--Body: Left and Right--%>
          <div id="divBody">
            <div id="leftContainer" class="bodyWidth196px">
              <div class="mainHeader">
                <p>Left</p>
              </div>
              <div class="mainBody overflowYhidden
                                overflowXhidden bodyWidth196px
                                borderBottomCurved height85percent">
                <p>
                  Blah blah etc.
                </p>
                <asp:ContentPlaceHolder ID="LeftContentPlaceHolder" runat="server" />
                <br />
                <br />
              </div>
            </div>

            <div id="rightContainer" class="bodyWidth580px">
              <div class="mainHeader">RIGHT</div>
              <div class="mainBody bodyWidth580px borderBottomCurved">
                <asp:ContentPlaceHolder ID="BodyContentPlaceHolder" runat="server" />
                <br />
                <br />
              </div>
            </div>
          </div>

          <%--Footer--%>
            <div id="divFooter" class="center">
              <br />Blabbity boo dee dah.

            </div>
    </div>
  </form>
</body>

【问题讨论】：

标签： html css asp.net master-pages footer

【解决方案1】：

这是实现粘性页脚的常用 HTML 解决方案：

http://www.cssstickyfooter.com/html-code.html

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

我花了很长时间才弄清楚如何使这项工作与 ASPNET 和母版页一起工作。诀窍是将表单标签添加到 html, body {...} 规则中，如下所示：

html, body, form {height: 100%;}

因此，您的主布局 div 应该具有以下模式：

<body>
    <form runat="server">
        <div id="wrap">
            <div id="main">

            </div>
        </div>
        <div id="footer">

        </div>
    </form>
</body>

【讨论】：

我的还是不行。 :(我会再试一次，也许只是从头开始构建，看看我是否可以让它正常运行（然后添加我拥有的东西）-希望我能找出是什么破坏了它。谢谢你的回复，不过！！:)