首先我要道歉，因为我知道这个问题已经被问过无数次了，但我已经尝试了所有我发现的方法都无济于事。 :(
仅供引用:我正在尝试使用母版页创建一个 ASP.NET 网络应用程序。以下所有 HTML 代码均来 self 的 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 解决方案:
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>
关于html - ASP.NET Div 布局 - CSS 粘性页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26131233/