我正在建立一个网站，我可以让两个顶部部分适合。当我全屏时它们会这样做，但是一旦我改变了屏幕的大小，它就会跳下并留下空白。
我可能以错误的方式处理了这一切，因为其他一些事情似乎无法发挥作用。
这是CSS：
/* This Resets All Styles */
* {
hight: 100%;
margin: 0;
padding: 0;
}
/*layout*/
p {
line-height: 1.2em;
margin-bottom: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
color: #fff;
font-size: 55px;
font-weight: normal;
margin: 0;
padding: 0;
text-align: center;
}
h2 {
color: #fff;
font-size: 40px;
font-weight: normal;
margin: 0;
padding: 0;
text-align: center;
}
h3 {
font-size: 22px;
font-style: italic;
font-weight: 400;
margin: 5px 0;
padding: 20px;
position: inherit;
text-align: center;
z-index: 1;
}
/*boards*/
#board_1, #board_2, #boar_3, #board_4 {
width: 100%;
}
#board_1 {
background: url(../img/background_5.png);
background-image: min-height: 750px;
background-repeat: no-repeat;
background-size: 100% auto;
height: 100%;
margin: 0 auto;
}
.board1_p {
border-bottom: 30px;
color: white;
font-size: 2em;
max-width: 600px;
padding-left: 60%;
padding-top: 25%;
text-align: center;
}
#board_2 {
background-color: green;
color: #333333;
height: 100%;
margin: 0 auto;
max-height: 1000px;
min-height: 1000px;
}
这是HTML -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Zack Reid</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!--External Stlye-->
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
</head>
<body>
<!--artical starts here-->
<article>
<!--header which holds the nav and title-->
<section id="board_1" />
<main>
<div class="board1_p">
<p>Hi, thats me over there. This is a my home well my Internet home, it has everything you want to know about me.</p>
</div>
</div>
<header id="main_header">
<div class="content">
<nav class="nav">
<ul>
<li><a href="#board_1" title="Home">Home</a></li>
<li><a href="#board_2" title="About">About</a></li>
<li><a href="#board_3" title="Work">Work</a></li>
<li><a href="#board_4" title="Contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!--header ends-->
</section>
<section id="board_2">
<h2> About</h2>
<p>Text is fixed 206 pixels from the top, while the background is moving 40 pixels to the left.</p>
</section>
<section id="board_3">
<h2>Work</h2>
<p>This is a selection of work that I have done some, on half is for clients the other is work I have done on my own time.</p>
</section>
<section id="board_4">
<h2>Contact me if you have any</h2>
</section>
</article>
</body>
</html>
新HTML -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--artical starts here-->
<!--header which holds the nav and title-->
<section id="board_1">
<div class="board1_p">
<p>Hi, thats me over there. This is a my home well my Internet home, it has everything you want to know about me.</p>
</div>
<!--header ends-->
</section>
<section id="board_2">
<h2> About</h2>
<header id="main_header">
<div class="content">
<nav class="nav">
<ul>
<li><a href="#board_1" title="Home">Home</a></li>
<li><a href="#board_2" title="About">About</a></li>
<li><a href="#board_3" title="Work">Work</a></li>
<li><a href="#board_4" title="Contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<p>So You want to know about me</p>
</section>
<section id="board_3">
<h2>Work</h2>
<p>This is a selection of work that I have done some, on half is for clients the other is work I have done on my own time.</p>
</section>
<section id="board_4">
<h2>Contact me if you have any</h2>
</section>
</body>
</html>
新CSS -
/* This Resets All Styles */
* {
hight: 100%;
margin: 0;
padding: 0;
}
/*layout*/
p {
line-height: 1.2em;
margin-bottom: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
color: #fff;
font-size: 55px;
font-weight: normal;
margin: 0;
padding: 0;
text-align: center;
}
h2 {
color: #fff;
font-size: 40px;
font-weight: normal;
margin: 0;
padding: 0;
text-align: center;
}
h3 {
font-size: 22px;
font-style: italic;
font-weight: 400;
margin: 5px 0;
padding: 20px;
position: inherit;
text-align: center;
z-index: 1;
}
/*boards*/
#board_1, #board_2, #boar_3, #board_4 {
width: 100%;
}
#board_1 {
background: url(../img/background_5.png);
background-image: min-height: 750px;
background-repeat: no-repeat;
background-size: cover;
height: 1020px;
margin: 0 auto;
}
.board1_p {
border-bottom: 30px;
color: white;
font-size: 2em;
max-width: 600px;
padding-left: 60%;
padding-top: 25%;
text-align: center;
}
#board_2 {
background-color: green;
color: #333333;
height: 100%;
margin: 0 auto;
max-height: 1000px;
min-height: 1000px;
}
nav ul li
{
display: inline;
margin: 10px;
}
#board_3 {
background-color: blue;
color: #333333;
height: 100%;
margin: 0 auto;
max-height: 1000px;
min-height: 1000px;
}
#board_4 {
background-color: red;
color: #333333;
height: 100%;
margin: 0 auto;
max-height: 1000px;
min-height: 1000px;
}
答案 0 :(得分：1)
我修改了您的代码。我看到了一些错误：
hight属性
<main>，关闭了<div>并使用了<section../> 我改变了它们。我在您的代码上尝试了一些内容，我猜问题就在于您的导航问题。您已为菜单使用<div>，<nav>，<ul>和<li>标记。您必须将它们放置在固定位置，否则当浏览器大小缩小时它们会溢出。
以下是修改后的代码。我已经摆脱了你的菜单。如果这是你想要的，请检查一下。如果是这样，请尝试找到一种方法来修复菜单的位置。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Zack Reid</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!--External Stlye-->
<link rel="stylesheet" href="stil.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
</head>
<body>
<!--artical starts here-->
<article>
<!--header which holds the nav and title-->
<section id="board_1">
<div class="board1_p">
<p>Hi, thats me over there. This is a my home well my Internet home, it has everything you want to know about me.</p>
</div>
</section>
<!--header ends-->
</section>
<section id="board_2">
<h2> About</h2>
<p>Text is fixed 206 pixels from the top, while the background is moving 40 pixels to the left.</p>
</section>
<section id="board_3">
<h2>Work</h2>
<p>This is a selection of work that I have done some, on half is for clients the other is work I have done on my own time.</p>
</section>
<section id="board_4">
<h2>Contact me if you have any</h2>
</section>
</article>
</body>
</html>
CSS：
/* This Resets All Styles */
* {
padding: 0;
margin: 0;
height: 100%;
}
/*layout*/
p {
line-height: 1.2em;
margin-bottom: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: normal;
font-size: 55px;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
}
h2 {
font-weight: normal;
font-size: 40px;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
}
h3 {
font-weight: 400;
font-style: italic;
font-size: 22px;
text-align: center;
margin: 5px 0;
padding: 20px;
z-index: 1;
position: inherit;
}
/*boards*/
#board_1, #board_2, #boar_3, #board_4 {
width: 100%;
}
#board_1 {
background: url(background_5.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-image: min-height: 750px;
height: 100%;
margin: 0 auto;
}
.board1_p {
max-width: 600px;
padding-top: 25%;
padding-left: 60%;
color: white;
font-size: 2em;
border-bottom: 30px;
text-align: center;
}
#board_2 {
background-color: green;
color: #333333;
min-height: 1000px;
max-height: 1000px;
height: 100%;
margin: 0 auto;
}
检查您的链接。顺便说一句：我改变了风格链接和背景图片。
修改
新的HTML代码：
<html>
<head>
<link rel="stylesheet" type="text/css" href="stil.css" />
<title>Zack Reid</title>
</head>
<body>
<!--artical starts here-->
<article>
<!--header which holds the nav and title-->
<section id="board_1" />
<main>
<div class="board1_p">
<p>Hi, thats me over there. This is a my home well my Internet home, it has everything you want to know about me.</p>
</div>
</div>
<header id="main_header">
<div class="content">
<nav class="nav">
<ul>
<li><a href="#board_1" title="Home">Home</a></li>
<li><a href="#board_2" title="About">About</a></li>
<li><a href="#board_3" title="Work">Work</a></li>
<li><a href="#board_4" title="Contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!--header ends-->
</section>
<section id="board_2">
<h2> About</h2>
<p>Text is fixed 206 pixels from the top, while the background is moving 40 pixels to the left.</p>
</section>
<section id="board_3">
<h2>Work</h2>
<p>This is a selection of work that I have done some, on half is for clients the other is work I have done on my own time.</p>
</section>
<section id="board_4">
<h2>Contact me if you have any</h2>
</section>
</article>
</body>
</html>
新CSS。看到背景大小：
/* This Resets All Styles */
* {
hight: 100%;
margin: 0;
padding: 0;
}
/*layout*/
p {
line-height: 1.2em;
margin-bottom: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
color: #fff;
font-size: 55px;
font-weight: normal;
margin: 0;
padding: 0;
text-align: center;
}
h2 {
color: #fff;
font-size: 40px;
font-weight: normal;
margin: 0;
padding: 0;
text-align: center;
}
h3 {
font-size: 22px;
font-style: italic;
font-weight: 400;
margin: 5px 0;
padding: 20px;
position: inherit;
text-align: center;
z-index: 1;
}
/*boards*/
#board_1, #board_2, #boar_3, #board_4 {
width: 100%;
}
#board_1 {
background: url(s.jpg);
min-height: 750px;
background-repeat: no-repeat;
background-size: cover;
height: 1020px;
margin: 0 auto;
}
.board1_p {
border-bottom: 30px;
color: white;
font-size: 2em;
max-width: 600px;
padding-left: 60%;
padding-top: 25%;
text-align: center;
}
#board_2 {
background-color: green;
color: #333333;
height: 100%;
margin: 0 auto;
max-height: 1000px;
min-height: 1000px;
}
#board_3 {
background-color: blue;
color: #333333;
height: 100%;
margin: 0 auto;
max-height: 1000px;
min-height: 1000px;
}
#board_4 {
background-color: red;
color: #333333;
height: 100%;
margin: 0 auto;
max-height: 1000px;
min-height: 1000px;
}