css div 不应该有不同的宽度答案

【问题标题】：css divs have different widths when they shouldntcss div 不应该有不同的宽度
【发布时间】：2016-06-17 02:12:05
【问题描述】：

我有一个 div 容器，其中包含 2 个 div：横幅和内容。横幅和内容都将 css 属性宽度设置为 100%，但在渲染时它们是不同的。

这是我的 index.html

<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet"/>
    <title>JoeY34kaze's gw2 stuff</title>
<body>
    <div id="container">
        <header>
            <h1>
                This is my header.
            </h1>
        </header>
        <div id="banner">
            <h2>
                This is the banner.
            </h2>
        </div>
        <div id="content">
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
        </div>
    </div>

</body>
</html>

这是我的 style.css

    body {
    text-align:center;
}


header {
    width:100%;
    height:100px;
    background: #dbdbdb;
    z-index:10;
    position: fixed;
}

#container {
    overflow:hidden;
    min-width:100%;
    padding:0;
}

#banner {
    width:100%;
    height: 500px;
    padding:0;
    position: fixed;
    top: 100px;
    background-color:#707070;
}

#content {
    height:100%;
    width:100%;
    position: relative;
    top:400px;
    background-color: #ebebeb;
}

页面看起来像这样：

website

在我解决此问题之前，该页面还在这里https://gw2stuff.herokuapp.com/

问题是右侧的 2 个 div 没有对齐，但它们应该对齐。我认为问题来自内容 div 的相对位置，但我无法修复它，所以我的问题是如何对齐 2 个 div 以使它们的宽度匹配？

【问题讨论】：

标签： html css position css-position

【解决方案1】：

将content的位置改为：

 position: fixed;

【讨论】：

虽然这样可以解决问题，但我不想修复内容。

【解决方案2】：

删除body上的默认margin

body {
margin:0;
}

#content div 受该边距影响，但固定位置元素不受该边距的影响，尽管它们相对于该边距放置，因为您没有为它们声明 left:0 位置。

这应该自动包含在任何 CSS 重置中。

【讨论】：

这是你的解决方案，Paulie 打败了我 :-)

【解决方案3】：

将margin: 0 添加到内容，如果这不起作用，请将内容移动一点，也许left: 5px 会起作用

【讨论】：

我在解决自己的问题时尝试过，但没有成功。将 margin:0 添加到 body 是解决方案。