ASP.NET Div布局 - CSS粘性页脚

我会先道歉，因为我明白这已被问及数十亿次，但我尝试了所有我发现无济于事的事情。 :(ASP.NET Div布局 - CSS粘性页脚

FYI：。我试图创建一个使用母版页的ASP.NET Web应用程序下的所有HTML代码是从我的MP

我有3个问题：

如何赫克如何让我的脚注粘贴（我的失败代码将会在下面）？
在下面的设置中，我在头部/内容等内部嵌套了div。我假设这并不影响我坚持页脚的史诗之旅到底部？
最后，我有（表格）标签立即我的（身体）标签后。我知道其他人已经提到他们觉得好像有一个问题。我也觉得自己有能力粘住我的脚，但这可能是我从Noob本能中产生的一种非理性的恐惧......大声笑。

预先感谢您花时间帮助我！

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>

来源

2014-09-30 Noobody

下面是通常的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，身体{...}规则如下：

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

所以，你的主要布局的div应具有以下模式：

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

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

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

来源

2014-09-30 22:41:19 IrishChieftain

矿仍然是不工作。 :(我会再试一次，也许只是从头开始构建，看看我是否可以正确使用它（然后添加我所拥有的内容） - 希望我能弄清楚是什么破坏了它。谢谢你的回应，虽然!! :) – Noobody 2014-10-03 19:35:06

ASP.NET Div布局 - CSS粘性页脚

回答

相关问题