1 
<!DOCTYPE html>
<html>
<head>
<style>

这是宽度为 50% 的导航的大小

#navigation {
    position: fixed;
    top: 110px;
    width: 50%;
    left:50%;
    margin-left:-25%;
    background: #FFF;
    z-index: 10000;
    height: 60px;
    opacity:0.7;
    padding:0;
    border-bottom:1px solid #ccc;
}

#navigation ul {
    list-style: none;
    padding:30px 0 0 0;
    margin:0;
}

#navigation ul li {
    font-weight:bold;
    color:#3d3d3d;
    float:left;
    padding:0 20px 0 0;
    margin:0;
}

这是宽度也是 50% 的内容的大小

#content {
    position: relative;
    width: 50%;
    height: 100%;
    top:180px;
    left:50%;
    height:800px;
    margin-left:-25%;
    background-color: #3d3d3d;
    padding:0;
}
</style>
</head>

<body>
<div id="navigation">
    <ul>
        <li><a href="#">BUtton 1</a></li>
        <li><a href="#">BUtton 2</a></li>
            <li><a href="#">BUtton 3</a></li>
        <li><a href="#">BUtton 4</a></li>
    </ul>
</div>
<div id="content"></div>
</body>
</html>

我将导航和内容的宽度设置为 50%，但是当我在浏览器中打开它时，这两个框的宽度不同，有人可以帮我吗？

4

2 回答 2

0

在您的示例中，更改#content的 css 部分：

position: relative;

至：

position:absolute;

这是因为在相对的情况下，div 相对于它应该出现在文档中的位置出现。这意味着在您的情况下，相对于“#navigation”中的属性

而如果绝对div 出现在您确切告诉它的位置。与位于之前或之后的其他元素无关。

于 2015-02-02T07:48:40.963 回答
0

那是因为当您在width该元素中设置 % 时，会将其与他最近的父级相关联。

当您设置为时position:fixed，#navigation这使html他成为父母，而#content作为body他的父母。这里的问题是，对于默认的 dehtml标签有一个padding值，现在要使 body 成为一个 html equals 并且 50% 宽度等于在你的 css 中设置这个：

html, body {
  margin:0;
  padding:0;
}

在此处查看演示http://jsfiddle.net/cAtgd/3/

于 2013-10-24T22:10:04.120 回答