Question

我看过很多类似的话题;但我似乎没有得到正确的CSS代码。我的页面布局：有背景图片。然后我想在中间用不同的块创建一个白页（）从顶部的导航，标题，内容开始。

我没有让导航栏显示在页面顶部（浏览器顶部和栏之间没有空格）两者之间有一个小的间隙）。此外，我希望我的内容始终填满屏幕，直到＆＃39;在浏览器的下半部分之上。

HTML

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href ="css/main.css">
</head>
<body>

<div class="wrapper">
    <div class="nav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="education.html">Education</a></li>
            <li><a href="experience.html">Experience</a></li>
            <li><a href="more.html">More</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

    <div class="header">
    </div>

    <div class="maincontent">       
    </div>      
</div>
</body>
</html>

CSS

html, body {
height: 100%;
margin: 0;
}
body {
    background-image: url("bgimg.png");
background-repeat: repeat;
}
.wrapper{
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0 auto;
position: relative;
top: 0px;
background-color: white;
}
.nav {
background-color: white;
width: 100%;
height: 40px;
font-family: "Sans-serif", Verdana;
}
.nav li {
float: left;
list-style: none;
float: left;
display: inline;
text-align: center;
width: 20%;
line-height: 40px;
}
.nav a {
display: block;
width: 100px;
}
.header {
background-color: #F7D358;
width: 960px;
height: 100px;
position: relative;
top: 0px;
}
.maincontent {
background-color: white;
height: 100%;
margin: 0;
padding:0;
}

Answer 1

在这种情况下最简单的方法是设置：

.nav ul {
    margin: 0;
}

我建议您（高度）使用CSS RESET STYLE来避免这些问题。

示例：http://meyerweb.com/eric/tools/css/reset/

页面顶部的导航栏，内容直到页面高度的95％

1 个答案: