我有以下ASP.net代码:
<div class="pageContent">
<div style="width: 85%; text-align: center; margin: 0 auto;">
<div class="headerContent brClear">
ZSasdasdassad
</div>
<div class="bodyContent brClear">
<asp:ContentPlaceHolder ID="BodyPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footerContent brClear">
asdasdads
</div>
</div>
</div>
CSS:
.pageContent
{
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
position: relative;
}
.brClear
{
clear: both;
}
.headerContent
{
width: 100%;
height: 165px;
background: #ffd800;
}
.bodyContent
{
width: 100%;
height: 550px;
background: #f00
}
.footerContent
{
width: 100%;
height: 120px;
background: #ffd800;
position: fixed;
bottom: 0;
}
以100%显示:
以70%显示:
如何修改CSS以便:
答案 0 :(得分:1)
在width: auto;
中设置height: auto,
和.pageContent
,并在页脚中删除position: fixed;
:http://jsfiddle.net/vdcmgune/
答案 1 :(得分:1)
这是您正在寻找的解决方案吗?
更新:这可能是您只能使用css / html获得的最佳解决方案
答案 2 :(得分:-1)
看一下这个jQuery Sticky Footer。这是一个很好的简单解决方案。 (如果你没有使用Bootstrap,那就很好)
function ResizeContent() {
//Height of the available content area is Page Height - (Header and Footer height.
//In this case 100px;
var ContentHeight = Math.round($(window).height() - 100);
ContentHeight = ContentHeight + "px";
$("#MainContainer").css("min-height", ContentHeight);
};
$(function () {
//Resize the content after page load or resize
ResizeContent();
window.onresize = function () {
ResizeContent();
};
});
<div id="MainContainer" style="width:100%;">
<div class="panel panel-default" style="width:600px;margin-left:auto;margin-right:auto;margin-top:20px;">
<div class="panel-heading">jQuery Sticky Footer</div>
<div class="panel-body" style="text-align:center">
jQuery to adjust the content area after the page loads, or resized
<br /> <br />
Try resizing this page and see the content under this panel retain the same areas
<br /> <br />
</div>
</div>
</div>
<div id="Footer" style="background-color:#8A898A;color:#ffffff;width:100%;height:60px;text-align:center;padding:20px;">
This is a sticky footer - <a style="color:white" href="http://www.surfthru.com">www.surfthru.com</a>
</div>