html - 为什么我的页脚离得很远？-6ren

html - 为什么我的页脚离得很远？

转载作者：太空宇宙更新时间：2023-11-04 02:00:45

我有两个问题，但最主要的是为什么我的页脚在底部很远，即使我没有为主体定义尺寸并且在我的 block “页脚”和“部分”之间没有边距或任何你想要的？

另一个问题是为什么即使我在放大或缩小页面时处于相对位置， block “nav”和“section”的顶部也不总是对齐？

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>

最佳答案

这是因为你使用的是 position: relative;顶部:-363 像素；。而不是使用它，你应该使用 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>