我有两个问题，但主要的一个是为什么我的页脚在底部很远，即使我没有定义身体的大小，没有边距或任何你想要的块和＃34;页脚＆ ＃34;和＆＃34;部分＆＃34;？
另一个问题是，为什么即使我在页面上放大或缩小时处于相对位置，也可以在块的顶部＆＃34;导航＆＃34;和＆＃34;部分＆＃34;并不总是对齐？
p, li
{
text-align: justify;
}
/*----------------------------------------------------------------------------------------------------*/
/* POLICES */
/* */
/*----------------------------------------------------------------------------------------------------*/
@font-face {
font-family: 'ambleregular';
src: url('Amble-Regular-webfont.eot');
src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Amble-Regular-webfont.woff') format('woff'),
url('Amble-Regular-webfont.ttf') format('truetype'),
url('Amble-Regular-webfont.svg#ambleregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*----------------------------------------------------------------------------------------------------*/
/* CORPS DE LA PAGE */
/* */
/*----------------------------------------------------------------------------------------------------*/
.police
{
font-family: 'ambleregular', "Times New Roman", Georgia, Arial, Verdana, "Courier New", sans-serif;
}
#Bloc_principal
{
width: 900px;
height: auto;
margin: 0 auto;
border: 2px black solid;
background-color: purple;
}
/*----------------------------------------------------------------------------------------------------*/
/* EN - TETE */
/* */
/*----------------------------------------------------------------------------------------------------*/
header
{
border: 2px solid black;
background-color: blue;
}
#logo img
{
width:56px;
height: auto;
border:2px black solid;
float: left;
}
/*----------------------------------------------------------------------------------------------------*/
/* MENU */
/* */
/*----------------------------------------------------------------------------------------------------*/
.menu
{
border: 2px black solid;
padding: 20px;
width: 200px;
position: relative;
top: 12px;
left: 10px;
background-color: yellow;
}
.menu_perso
{
border: 2px black solid;
margin-bottom: 10px;
}
.menu_cote
{
border: 2px black solid;
margin-bottom: 10px;
}
.menu_perso ul, .menu_cote ul
{
list-style-type: none;
}
aside
{
border: 2px black solid;
padding-left: 40px;
}
footer
{
border: 2px black solid;
margin: 0px;
background-color: green;
position: relative;
}
/*----------------------------------------------------------------------------------------------------*/
/* CORPS */
/* */
/*----------------------------------------------------------------------------------------------------*/
.contenu
{
border: 2px black solid;
width: 622px;
position: relative;
top: -363px;
left: 265px;
background-color: orange;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>GE-tools</title>
</head>
<body class="police">
<div id="Bloc_principal">
<header>
<div id="logo">
<img src="GE_tool.PNG" alt="Logo">
</div>
<h1 class="titre_principal">GE-Tools</h1>
</header>
<section class="menu">
<nav class="menu_perso">
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">My Mails</a></li>
<li><a href="#">Chat</a></li>
</ul>
</nav>
<nav class="menu_cote">
<h1>Tools</h1>
<ul>
<li><a href="#">aaaaaaaaaaa</a></li>
<li><a href="#">bbbbbbbbbbb</a></li>
<li><a href="#">ccccccccccc</a></li>
<li><a href="#">ddddddddddd</a></li>
<li><a href="#">eeeeeeeeeee</a></li>
<li><a href="#">fffffffffff</a></li>
</ul>
</nav>
<aside>
<a href="#">Contact Me</a>
</aside>
</section>
<section class="contenu">
<h1>Welcome in GE-tool</h1>
<p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.</p>
</section>
<footer>
<p>Copyright GE - Tools corporation 2017©</p>
</footer>
</div>
</body>
</html>
答案 0 :(得分：1)
你建立这种方式的方式已经破裂。您在top: -363px;上有.contenu，这就是页脚如此之低的原因。这个位置发生了变化，但技术上仍然占据了空间。你从未为该元素声明absolute定位，这将使它脱离流程。
但是，所有这些都是构建这种布局的错误方法。您可以使用flexbox或浮动元素执行此操作。
答案 1 :(得分：1)
这是因为您正在使用position: relative; top: -363px;。您应该使用float: left;和float: right。
所以你改变了：
.menu
{
border: 2px black solid;
padding: 20px;
width: 200px;
position: relative;
top: 12px;
left: 10px;
background-color: yellow;
}
到
.menu
{
border: 2px black solid;
padding: 20px;
width: 200px;
float: left;
background-color: yellow;
}
然后
.contenu
{
border: 2px black solid;
width: 622px;
position: relative;
top: -363px;
left: 265px;
background-color: orange;
}
到
.contenu
{
border: 2px black solid;
width: 622px;
float: right;
background-color: orange;
}
然后将您的页脚更改为：
footer
{
border: 2px black solid;
margin: 0px;
background-color: green;
clear: both;
}
p, li
{
text-align: justify;
}
/*----------------------------------------------------------------------------------------------------*/
/* POLICES */
/* */
/*----------------------------------------------------------------------------------------------------*/
@font-face {
font-family: 'ambleregular';
src: url('Amble-Regular-webfont.eot');
src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Amble-Regular-webfont.woff') format('woff'),
url('Amble-Regular-webfont.ttf') format('truetype'),
url('Amble-Regular-webfont.svg#ambleregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*----------------------------------------------------------------------------------------------------*/
/* CORPS DE LA PAGE */
/* */
/*----------------------------------------------------------------------------------------------------*/
.police
{
font-family: 'ambleregular', "Times New Roman", Georgia, Arial, Verdana, "Courier New", sans-serif;
}
#Bloc_principal
{
width: 900px;
height: auto;
margin: 0 auto;
border: 2px black solid;
background-color: purple;
}
/*----------------------------------------------------------------------------------------------------*/
/* EN - TETE */
/* */
/*----------------------------------------------------------------------------------------------------*/
header
{
border: 2px solid black;
background-color: blue;
}
#logo img
{
width:56px;
height: auto;
border:2px black solid;
float: left;
}
/*----------------------------------------------------------------------------------------------------*/
/* MENU */
/* */
/*----------------------------------------------------------------------------------------------------*/
.menu
{
border: 2px black solid;
padding: 20px;
width: 200px;
float: left;
background-color: yellow;
}
.menu_perso
{
border: 2px black solid;
margin-bottom: 10px;
}
.menu_cote
{
border: 2px black solid;
margin-bottom: 10px;
}
.menu_perso ul, .menu_cote ul
{
list-style-type: none;
}
aside
{
border: 2px black solid;
padding-left: 40px;
}
footer
{
border: 2px black solid;
margin: 0px;
background-color: green;
clear: both;
}
/*----------------------------------------------------------------------------------------------------*/
/* CORPS */
/* */
/*----------------------------------------------------------------------------------------------------*/
.contenu
{
border: 2px black solid;
width: 622px;
float: right;
background-color: orange;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>GE-tools</title>
</head>
<body class="police">
<div id="Bloc_principal">
<header>
<div id="logo">
<img src="GE_tool.PNG" alt="Logo">
</div>
<h1 class="titre_principal">GE-Tools</h1>
</header>
<section class="menu">
<nav class="menu_perso">
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">My Mails</a></li>
<li><a href="#">Chat</a></li>
</ul>
</nav>
<nav class="menu_cote">
<h1>Tools</h1>
<ul>
<li><a href="#">aaaaaaaaaaa</a></li>
<li><a href="#">bbbbbbbbbbb</a></li>
<li><a href="#">ccccccccccc</a></li>
<li><a href="#">ddddddddddd</a></li>
<li><a href="#">eeeeeeeeeee</a></li>
<li><a href="#">fffffffffff</a></li>
</ul>
</nav>
<aside>
<a href="#">Contact Me</a>
</aside>
</section>
<section class="contenu">
<h1>Welcome in GE-tool</h1>
<p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.</p>
</section>
<footer>
<p>Copyright GE - Tools corporation 2017©</p>
</footer>
</div>
</body>
</html>