我希望我的页脚占据页面的整个宽度但是由于某种原因，当我在safari中预览时它不起作用（它在Dreamweaver中看起来很好）。怎么了？我希望它放在页面底部并占据整个宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Liveweave
</title>
<!-- Place cursor after this and select a
JavaScript library from the menu above -->
<!-- Supports context-sensitive CSS3 auto-completion -->
<!-- Style starts here. Try adding new CSS tags. -->
<style type="text/css">
@charset"UTF-8";
/* CSS Document */
Html, body {
padding: 0;
margin: 0;
height: 100%;
font-family: Tahoma, Geneva, sans-serif;
background: rgb(255,255,255);
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjdmN2Y3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(53%, rgba(246,246,246,1)), color-stop(100%, rgba(247,247,247,1)));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=1 );
/* IE6-8 fallback on horizontal gradient */
}
#header {
width: 100%;
height: 60px;
border-top: solid 4px #00539E;
}
#logo {
position: absolute;
left: 20px;
top: 35px;
color: #000;
font-size: 20px;
}
#header-text {
width: 400px;
position: absolute;
top: 70px;
left: 20px;
font-size: 12px;
font-weight: 300;
color: #333;
}
/* mainmenu */
#mainmenu {
width: 100%;
margin-right: 20px;
/* min-height: 180px;
*/
padding-bottom: 20px;
margin-top: -52px;
/* padding-top: -42px;
*/
overflow: hidden;
}
#mainmenu ul {
list-style: none;
margin: 0;
float: right;
color: #FFF;
}
#mainmenu ul li {
display: inline-block;
float: left;
width: 140px;
line-height: 18px;
}
#mainmenu>ul>li {
margin-left: 20px;
}
#mainmenu ul li a {
font-size: 12px;
display: block;
text-decoration: none;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
color: #333;
padding-left: 4px;
letter-spacing: 1px;
-moz-transition-property: all, -moz-transform;
-moz-transition-duration: .4s, .4s, .4s, .4s;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-ms-transition-property: all, -ms-transform;
-ms-transition-duration: .4s, .4s, .4s, .4s;
-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-o-transition-property: all, -o-transform;
-o-transition-duration: .4s, .4s, .4s, .4s;
-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-property: all, -webkit-transform;
-webkit-transition-duration: .4s, .4s, .4s, .4s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-property: all, transform;
transition-duration: .4s, .4s, .4s, .4s;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
color: #005EBC;
-moz-transition-property: all, -moz-transform;
-moz-transition-duration: .4s, .4s, .4s, .4s;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-ms-transition-property: all, -ms-transform;
-ms-transition-duration: .4s, .4s, .4s, .4s;
-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-o-transition-property: all, -o-transform;
-o-transition-duration: .4s, .4s, .4s, .4s;
-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-property: all, -webkit-transform;
-webkit-transition-duration: .4s, .4s, .4s, .4s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-property: all, transform;
transition-duration: .4s, .4s, .4s, .4s;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
}
p {
font-size: 13px;
color: #333;
font-weight: 300;
}
h1 {
font-size: 30px;
letter-spacing: 1px;
color: #0064C5;
/* display: inline-block;
*/
margin-bottom: 0;
}
h2 {
font-size: 22px;
letter-spacing: 1px;
color: #BBB;
/* display: inline-block;
*/
margin-bottom: 0;
}
H5 {
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
padding-left: 4px;
font-size: 11px;
border-bottom: 1px dotted #666;
background: rgb(29,115,196);
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkNzNjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDY0YzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(29,115,196,1)), color-stop(100%, rgba(0,100,197,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d73c4', endColorstr='#0064c5', GradientType=0 );
/* IE6-8 */
}
div#content-left {
float: left;
width: 40%;
}
div#content-headline {
float: right;
width: 55%;
padding-right: 50px;
overflow: auto;
}
div#content-right {
float: right;
width: 55%;
max-height: 60%;
padding-right: 50px;
}
div#content-center {
overflow: hidden;
}
/* footer */
#main_footer {
clear:both;
position: fixed;
background: #cfc8c0;
height: 46px;
overflow: hidden;
display: block;
bottom:0;
}
#main_footer #lien_hot_news {
background: #e14242 url(pics/hot_news.gif) 50% 0 no-repeat;
color: #fff;
font: italic normal 24px Georgia, serif;
height: 38px;
width: 145px;
padding-top: 8px;
display: block;
text-align: center;
float: left;
}
#main_footer #lien_hot_news:hover {
background-color: #e92c26;
}
#main_footer #dernier_tweet {
float: left;
margin-left: 11px;
margin-top: 11px;
background: #fff url(ics/dernier_tweet_gauche.gif) 0 0 no-repeat;
position: relative;
}
#main_footer #dernier_tweet .lien_twitter {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 24px;
display: block;
}
#main_footer #dernier_tweet .inner {
max-width: 550px;
background: url(../images/picto/dernier_tweet_droite.gif) right 0 no-repeat;
padding: 4px 15px 5px 53px;
height: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#main_footer #dernier_tweet a {
color: #75716c;
}
#main_footer #dernier_tweet a:hover {
color: #444;
}
#main_footer #dernier_tweet .last_tweet {
overflow: hidden;
}
#main_footer .autres_liens {
position: absolute;
right: 12px;
top: 9px;
font: italic normal 15px Georgia, serif;
color: #95897c;
}
#main_footer .autres_liens .label {
float: left;
padding-right: 3px;
padding-top: 5px;
}
#main_footer .autres_liens a {
float: left;
display: block;
margin-left: 5px;
}
#main_footer .autres_liens a img {
width: 28px;
height: 28px;
display: block;
}
}
</style>
<!-- Style ends here -->
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$("#MetTileFive").MetTileFive({
timeInterval: 6000
}
);
}
);
</script>
<div id="header">
</div>
<div id="logo">
My Name
</div>
<div id="mainmenu">
<ul>
<li>
<h5>
Menu I
</h5>
<ul>
<li>
<a title="" href="">
Biography
</a>
</li>
<li>
<a title="" href="">
Publications
</a>
</li>
</ul>
<li>
<h5>
Menu 2
</h5>
<ul>
<li>
<a title="" href="">
Demo
</a>
</li>
<li>
<a title="" href="">
Features
</a>
</li>
<li>
<a title="" href="">
Comparison
</a>
</li>
</ul>
</li>
<li>
<h5>
Menu 3
</h5>
<ul>
<li>
<a title="" href="">
Item 1
</a>
</li>
<li>
<a title="" href="">
Item 2
</a>
</li>
<li>
<a title="" href="">
Item 3
</a>
</li>
</ul>
</li>
<li>
<h5>
Menu 4
</h5>
<ul>
<li>
<a title="" href="">
ddfd
</a>
</li>
<li>
<a title="" href="">
dsfd
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- END DIV Main Menu -->
<div id="header-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut.
</div>
<div id="content-left">
<a id="MetTileFive" class="tile-five" href="http://www.facebook.com/jEffectBox" target="_blank">
<div>
<label>
Lorem Ipsum
</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit... nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div>
<label>
Ipsum
</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit... laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div>
<label>
Lorem
</label>
<p>
Lorem ipsum dolor sit amet, consectetur a... laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</a>
</div>
<div id="content-headline">
<h1>
Novitates autem si spem
</h1>
</div>
<div id="content-right">
<p>
Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus
fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo
loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin
in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est,
quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero
in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo
valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in
quibus diutius commorati sumus.
</p>
<h2>
This is a sub-title
</h2>
<p>
Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans
terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem
sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem
Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim
itidemque Ascalonem Gazam aevo superiore exstructas.
</p>
<p>
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus
reque publica versantur; ubi enim istum invenias qui honorem amici anteponat
suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur
calamitatum societates! Ad quas non est facile inventu qui descendant.
Quamquam Ennius recte. END END END
</p>
</div>
<footer id="main_footer">
<a href="#_" id="lien_hot_news">
Hot News
</a>
<div id="dernier_tweet">
<a href="https://twitter.com/" class="lien_twitter" target="_blank">
</a>
<div class="inner">
<!-- Ajax load to prevent cache behavior -->
</div>
</div>
<div class="autres_liens">
<div class="label">
Check us also on :
</div>
<a href="http://" target="_blank">
<img src="pics/footer_facebook_2.png" alt="facebook" />
</a>
<a href="http:/" target="_blank">
<img src="pics/footer_youtube_2.png" alt="twitter" />
</a>
<a href="http://" target="_blank">
<img src="pics/footer_slideshare_2.png" alt="slideshare" />
</a>
</div>
</footer>
</body>
</html>
</html>
答案 0 :(得分：4)
您需要将宽度指定为100％
#main_footer {
clear:both;
position: fixed;
background: #cfc8c0;
height: 46px;
overflow: hidden;
display: block;
bottom:0; width:100%
}
<强> DEMO
答案 1 :(得分：4)
答案 2 :(得分：3)
您的页脚没有定义任何宽度。
为您的页脚提供100％的宽度，即用下面的
更新#main_footer css
#main_footer {
clear: both;
position: fixed;
background: #cfc8c0;
height: 46px;
overflow: hidden;
display: block;
bottom: 0;
width: 100%; /* add this rule */
}
查看您的working example
答案 3 :(得分：1)
你给它一个固定的位置而没有提供宽度。 position: fixed;仅与其包含的内容一样大，除非您另行指定。
将width: 100%;添加到页脚的CSS。
答案 4 :(得分：0)
width: 100%;或width: 100vw;可以。您没有定义宽度。