gpt4 book ai didi

html - 页面顶部的导航栏,内容直到页面高度的 95%

转载 作者:太空宇宙 更新时间:2023-11-04 13:26:58 25 4
gpt4 key购买 nike

我看过很多类似的话题;但是我似乎没有得到正确的CSS代码。我的页面布局:有背景图片。然后我想在中间创建一个白页,其中包含不同的 block (),从顶部的导航、标题、内容开始。

我没有让导航栏显示在页面顶部(浏览器顶部和栏之间没有空间),两者之间有一个小间隙)。此外,我希望我的内容始终填满屏幕,直到“恰好”位于浏览器下部上方。

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;
}

最佳答案

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

.nav ul {
margin: 0;
}

我(强烈)推荐您使用 CSS RESET STYLE 来避免这些问题。

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

关于html - 页面顶部的导航栏,内容直到页面高度的 95%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23642172/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com