HTML/CSS网页看起来不像它应该的样子
1) 我的导航和旁白不够高。他们不应该从哪里开始,也不应该在什么时候结束HTML/CSS网页看起来不像它应该的样子,html,css,user-interface,Html,Css,User Interface,1) 我的导航和旁白不够高。他们不应该从哪里开始,也不应该在什么时候结束 <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Titulazo</title> <meta name="description" content=""> <meta name="viewpor
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
2) 我的部分(以及导航和旁白)不会在页面底部结束
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
3) 我的页脚不在页面底部
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
我正在使用HTML和CSS。我目前正在使用谷歌浏览器
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
我希望我的页面如下所示:
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
body{
width:100%;
position:absolute;
height:auto;
}
header#MainHeader{
width: auto;
height: auto;
background-color: orange;
margin: 20px;
}
nav {
position: relative;
float: left;
height: auto;
width:200px;
margin: 20px;
top: 0px;
background-color: lightblue;
bottom: 0px;
}
section{
width: 900px;
height: auto;
float: left;
top: 500px;
background-color: pink;
}
aside{
width: 200px;
height: 100%;
margin: 20px;
top: 0px;
float: right;
background-color: lightgreen;
}
footer#MainFooter{
width: auto;
height: auto;
background-color: gray;
margin: 20px;
clear:both;
}
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
它看起来是这样的:
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
HTTP:
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
1) 我的导航和旁白不够高。他们不会从他们想要的地方开始
也不应该在应该结束的时候结束
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
- 增加高度:100%至车身、导航和侧边;移除位置:身体绝对位置;同时删除位置:相对于导航、剖面和旁侧,因为它们是使用浮动定位的,所以最好使用边距来定位它们,而不是相对/绝对位置。移除/替换导航和侧边的边距:20px(边距:0 20px),使其从相同的垂直位置开始
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
- 不要忘记清除浮动导航、剖面和旁侧
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
- 将高度:100%添加到html标记中,并将页脚定位为绝对或固定,具体取决于底部为0的要求,注意当页脚区域溢出时,导航、剖面和侧边会发生什么情况
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
position:fixed;
left:0px;
bottom:0px;
到页脚的CSS
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
对于您的导航和旁白,您应该将position:absolute从body中删除,并将导航高度更改为100%尝试添加以下css:final output:
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
这不是最好的办法。我建议您学习引导网格布局,并学习使用chrome开发工具。给页脚一个
固定的位置将使其变得粘乎乎的。如果OP不这样指定,我不会认为这是所需的行为。请阅读响应式设计教程或使用css框架
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Titulazo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id = "MainHeader">
<h1>Main Header h1</h1>
<p>Hello world! This is HTML5 Boilerplate.</p>
</header>
<nav>
<h1>Nav h1</h1>
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</nav>
<section>
<h1>Section h1</h1>
<header>
<h1>Section header</h1>
</header>
<article>
<h1>Article h1</h1>
<p>Posted on <time datetime="2009-10-22">October 22, 2009</time></p>
<p>Article text</p>
</article>
<footer>
<h1>Section Footer</h1>
</footer>
</section>
<aside>
<h1>Aside h1</h1>
<p>Aside text</p>
</aside>
<footer id = "MainFooter">
<h1>Main Footer, copyright 2018, Álvaro Puertas</h1>
</footer>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>