使div占据页面的整个宽度

我正在一个小网站上工作。为了便于阅读，我将网站的所有内容都推送到了中心。使div占据页面的整个宽度

body { 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
}

问题是，div遵循这个规则，只在非常中心。

enter image description here

在页脚类我试图通过设置他们回到100％重置利润率和宽度，但没有奏效。

.footer { 
    width: 100%; 
    margin-left: 0%; 
    margin-right: 100%; 
}

CodePen

来源

2015-01-31 Vader

而不是设置整个body至500像素的宽度，创造你的主要内容div，然后将页脚下方。

#content { 
 
    width: 500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<body> 
 
    <div id="content"> 
 
    <!-- Main page content here --> 
 
    </div> 
 
    <div id="footer"> 
 
    <!-- Footer content here --> 
 
    </div> 
 
</body>

来源

2015-01-31 18:41:45 MTCoster

要么放置.footer元件包装元素以外：

Example Here

在这种情况下，使用其他比body到作为功能的元件包装/容器。我用了一个元素与.container类：

.container { 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
}

作为替代方案，你也绝对.footer元素位置和顺序添加left: 0; right: 0;它占用的页面的整个宽度：

Example Here

.footer { 
    position: absolute; 
    left: 0; 
    right: 0; 
}

来源

2015-01-31 18:42:57

尝试从你的身体的CSS移动到一个包含<div>并把你的所有内容，并让你的页脚低于包含<div>，如果元素是唯一使用id s不是class

例如，

HTML: 
<body> 
<div id="mainContent"> 
<!-- Main site stuff here --> 
</div> 
<div id="footer"> 
<!-- footer info here--> 
</div> 

CSS: 
body{ 
/*No CSS*/ 
} 
#mainContent{ 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#footer { 
    width: 100%; 
    margin: 0; 
}

来源

2015-01-31 18:48:39 MrPickles

为什么要为页脚设置'margin-right：100％;'？ – MTCoster 2015-02-01 21:39:34

你是对的，我现在将它删除。 – MrPickles 2015-02-02 09:22:27

使div占据页面的整个宽度

回答

相关问题