在我的 html 和 css 中。我的问题是，如果我不应用上边距，则 div 会相互重叠，并且如果位置不是绝对的，div 不会填充浏览器窗口。感谢任何帮助。 PS 我是 html 和 css 的新手，我认为 stackoverflow 会帮助我发展。 编辑: http://jsfiddle.net/reyaqmc7/ JS fiddle代码来帮助你评估。谢谢!
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- The world wide web project. Explaining the people the use of world wide web -->
<title>The world wide web</title>
</head>
<body>
<header>
<div id="maincontainer">
<div id="logo"><img src="logopng.png" class="logo" /></div>
<div ID="nav">
<nav>
<ul>
<li><a href="">What</a></li>
<li><a href="">How</a></li>
<li><a href="">When</a></li>
<li><a href="">Who</a></li>
<li><a href="awesome">Awesome!</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- The navigation -->
<div id="slider"></div>
<section id="page-section what">
<div class="containers"></div>
</section>
<section id="page-section what">
<div class="containers"></div>
</section>
<section id="page-section what">
<div class="containers"></div>
</section>
<section id="page-section what">
<div class="containers"></div>
</section>
<footer></footer>
</body>
</html>
CSS
@font-face{
font-family: klavika; src:url(klavika.woff);
}
div#nav{
height: 5em;
width: 70%;
top: 0;
right:0;
background-color: rgba(242, 242, 242, 1);
position: absolute;
}
/*ul{list-style: none; float: right;}
li{
display: inline-block;
height: 3em;
width: 5em;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-weight: 400px;
font-size: 25px;
color: white;
font-style: bold;
}
div#slider{
height: 20em;
width: 100%;
left: 0;
right: 0;
top: 5em;
background-color: rgba(220, 220, 220, 1);
position: absolute;
}
li a{
text-decoration: none;
color: rgba(150,150,150,1);
}
li:hover{
border-bottom: 3px solid;
border-bottom-color: rgba(0, 216, 255, 1);}*/
nav a{
background-color: rgba(242, 242, 242, 1);
border-bottom: 3px transparent;
font-family: klavika;
display: block;
padding: 2em 2em 1.65em 1.5em;
text-decoration: none;
color: rgba(150,150,150,50);
-webkit-transition:border-bottom 0.3s ease, background-color 0.4s ease;
transition: border-bottom 0.3s ease, background-color 0.4s ease;
}
nav a:hover{
border-bottom: 3px solid;
border-bottom-color: rgba(0, 148, 255, 1);
color: rgba(82, 212, 214, 1);
/*background-color: rgba(150,150,150,50);*/
}
nav ul{
list-style: none;
float: right;
margin: 0;
}
li{
display: inline-block;
height: 5em;
}
div#logo{
float: left;
height: 5em;
width: 8em;
margin-left: 5em;
opacity: .3;
-webkit-transition:opacity 1s ease;
}
div#logo:hover{opacity: 100}
img.logo{max-width: 100%; max-height: 100%; opacity: 10;}
div#maincontainer{
height: 5em;
width: 100%;
top: 0;
left: 0;
right: 0;
background-color: rgba(242, 242, 242, 1);
position: absolute;
}
div#slider{
background-color:red;
width: 100%;
position: absolute;
right: 0;
left: 0;
height: 15em;
margin-top: 7em;
}
最佳答案
如果你想在没有绝对位置的情况下填充窗口，请将 body margin 设置为 0
从#maincontainer 和#slider 中删除绝对位置，然后您可以从#slider 中删除margin-top。
div 正在折叠，因为您没有内容，请尝试添加这些:
body {
margin:0;
}
.containers {
height:50px;
background: blue;
margin-top: 5px;
}
您现在将看到您的 4 个容器，正如它们应该看到的那样。
关于html - 我的 div 重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26938576/