Question

我想摆脱导航栏下页面中间的空白区域。但是在尝试了很多东西并且白条仍然存在之后，我很困惑。

这是我的代码：

html：

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">

<link rel="stylesheet" href="style.css"/>

<link rel="stylesheet" href="reset.css"/>

</head>

<body>

    <div class="header">

        <div class="navbar">
        <ul>
            <li><a>About</a></li>
            <li><a>Projects I've worked on</a></li>
            <li><a>Impossible List</a></li>
            <li><a>Contact</a></li>
        </ul>
        </div>
        <!-- end navbar div-->

    <div class="content">
    <p id = "title">Srikant Devarajan</p>

    </div>
    <!--end content div-->
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>


</body>
<!--end body-->
</html>
<!--end html-->

这是我的CSS：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(http://fonts.googleapis.com/css?family=Lato:300);

html,body{
    height:100%;
}
.header{ 
  background: url(images/background5.jpg) no-repeat center center fixed; 
   background-size: cover;
   height:100%;
}
.navbar{
    color:white;
    list-style: none;
    font-family: "Roboto";
    text-align:center;
    padding:20px;
    background-color:black;
    opacity:1.0;
    filter: alpha(opacity=70);
    position:fixed;
    top:0;
    widows: 100%;
}

.navbar ul{
    list-style: none;
}

.navbar li{
    display: inline;
    padding:70px;
    color:#CCCCCC;
}

.navbar a:hover{
    color:#fff;
}

.nav a{
    display:inline-block;
    padding:10px;
    opacity:2.0;
}
#title{
    margin-top:110px;
    font-size:70px;
    text-align:center;
    color:white;
    font-family:'Lato';
}

.content p{
    margin-top:70px;
    font-size:35px;
    text-align:center;
    color:white;
    font-family:'Lato';
}

Answer 1

当您将某些内容定位为固定时，请设想浏览器不再将其视为占用空间。您的空白是由标题ID中的margin-top创建的。尝试修补该值并查看空白区域是否发生变化。

编辑：的确如此。它是标题ID中的margin-top。

当Navbar div具有Position：fixed时创建的空白区域;

1 个答案: