我有一个简单的2列布局,页脚可以清除标记中的左右div.我的问题是我无法在所有浏览器中让页脚停留在页面底部.如果内容向下推动页脚,它就可以工作,但情况并非总是如此.
它在Firefox中无法正常工作.当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时,我在页脚下方看到一条背景颜色条.不幸的是,这是页面的默认状态.
在下面显示的标记中,我试图让内容div一直延伸到页面的底部,但只有在显示内容时它才会拉伸.我想这样做的原因是,即使没有任何内容要显示,垂直边框仍会显示在页面下方.
这是我的HTML:
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
我的CSS:
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100% …虽然我网站上的大多数页面都有足够的内容可以将页脚推到页面底部,适合大多数人.无论如何,无论屏幕尺寸如何,我都知道它始终固定在底部.
我已经尝试了很多方法,比如底部:0x; position:absolute:等等.似乎工作得很好,偶尔会将页脚从容器中推出,然后使用其中的一些示例将其固定到底部.
包括页脚两部分的HTML和CSS(页脚和版权栏).<section id="footer"> div无论如何,他们都在内心.
我删除了我的尝试,以便人们可以立即查看它,看看当前的代码是什么修改.
实时网址 - http://www.mangdevelopment.co.uk/nakedradish
(这是一个餐厅网站.不要担心'裸体'这个词).
HTML
<section id="footer">
<div class="container">
<div class="row">
<div class="span1">
<div id="small-logo">
<img src="img/small-logo.png" />
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR BOXES</h6>
<ul>
<a href="#">
<li>Classic Box</li>
</a>
<a href="#">
<li>Vegetarian Box</li>
</a>
<a href="#">
<li>Family Box</li>
</a>
<a href="#">
<li>Dinner Party Box</li>
</a>
<a href="#">
<li>Gift Box</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR RECIPES</h6>
<ul>
<a href="#">
<li>Last Weeks Feature</li>
</a> …CSS
* {
margin: 0px;
padding: 0px;
}
html {
margin: 0px;
padding: 0px;
}
body {
line-height: 1;
margin: 0px;
padding:0px;
background:url("../images/22.jpg") scroll center top #16202C;
/* box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset;
-webkit-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset;
-moz-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset;
-o-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; */
color: #464646;
font: 13px/17px arial, sans-serif;
min-width: 1300px;
}
#wrapper {
margin: 0px;
}
#header …我需要在我的母版页面中将我的页脚始终显示在页面底部.现在,一个内容页面变大,页脚覆盖内容页面.我使用带有页眉和页脚部分的母版页.如果您需要其他代码,请告诉我.但我认为只需使用下面的CSS即可解决.
页脚的CSS
div#Footer
{
width: 100%;
height: 80px;
padding: 1px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
color: #ffffff;
position: absolute;
bottom: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
页面的Css嵌入在母版页中
#MainComments
{
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#LeaveComments
{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 60%;
}
嵌入母版页面的页面标记
<div id="MainComments">
<asp:Image ID="CommentedImage" ImageUrl="~/Pictures/4.jpg" Width="50%" runat="server" />
<br />
<br />
<asp:Label ID="lblCommenter" runat="server" Text="By Josh"></asp:Label><br />
<asp:TextBox ID="PicComments" Text="Hello" runat="server" Rows="3" Width="50%" TextMode="MultiLine"
ReadOnly="True"></asp:TextBox>
<br …