防止页脚与Flex容器中的其他元素重叠

时间：2016-06-07 16:10:04

标签： html css css3 flexbox

在我的网页上有一个页脚，它应位于页面底部，所有内容都显示在其顶部。

但是只要我添加标题（我知道它是一个巨大的标题但我喜欢它）或任何其他类型的内容，页脚就会重叠它。

我该如何防止这种情况？

以下是代码：

＆＃13;
＆＃13; 
@font-face { 	
   font-family: "Neuropol";
   src: url("http://gameenkaku.altervista.org/it/CSS/Fonts/neuropol.ttf") 
   format("truetype"); 
   } 
   
@font-face{ 	
   font-family: "Conthrax"; 
   src: url("http://gameenkaku.altervista.org/it/CSS/Fonts/conthrax-sb.ttf") 
   format("truetype"); 
   } 
   
@font-face { 		
   font-family: "Karcade"; 		
   src: url("http://gameenkaku.altervista.org/it/CSS/Fonts/karmatic_arcade.ttf") 
   format("truetype"); 	
   }

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding:0;
}

section.content {
  flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
}

ul{
        padding: 0;
        list-style: none;
        border-style: solid none;
        border-color: lightblue;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
    	font-family: "Neuropol";
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #0066ff;/*#939393;*/
    }
    ul li ul.dropdown{
        min-width: 125px; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block; /* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }

html, body {
            margin:0;
            padding:0;
            height:100%;
    	}
    
    div {
    	padding: 0;
	}
    
    a {
    	text-align:center;
    }
    
    h1, h2, h3, h4, h5, h6 {font-family: "Karcade", sans-serif;}
    
    p {padding:0px 15px;}
       
    th, td {
        font-family: "Conthrax", sans-serif;
        color: white;
		   }
     
    th {
    	background-color: #0066ff;
    	color: white;
		}

    footer {
    	text-align:center;
    	color:white;
        font-size:0.5em;
        width:100%;
		height:auto;
		position:absolute;
		bottom:0;
		left:0;
        background-color:black;*#0066ff;*/
    	  }
    
    /*.classes*/
    
    .wrapper {	
    		margin:0 0;
            padding:0 0 0 0;
            width: 100% ; /*58.536585%; 960/1640 = .58536585*/
            height: auto;
    			
             }
    
    .wallpaper {
    	overflow-x:hidden;
    }
    
    .logo {
    	z-index: 999999;
        position: absolute;
        padding: 0;
        margin-top: -17%;
        margin-left: 69%;
        height: auto;
        width: 25%;
        }
             
	.resize {
    		width:100%; 
            height:auto;
            margin:0 0 0 0;
            padding:0 0 0 0;
            }
＆＃13; 
<!DOCTYPE html>
<html>
	<head>
    	<title>GameEnkaku - </title>
        <link rel="stylesheet" type="text/css" href="CSS/bodyStyle.css"/>
  		<link rel="stylesheet" type="text/css" href="CSS/menuStyle.css"/>
        <link rel="stylesheet" type="text/css" href="CSS/flexStyle.css"/>
        <link rel="stylesheet" type="text/css" href="CSS/fonts.css"/>
	<head>
	<body>
    	<div class="flex-container">
  			<header>
    			<div class="wrapper"><img class="resize" src="http://gameenkaku.altervista.org/it/Immagini/eSportsWallpaper.jpg" alt="Promo"></div>
				<img class="logo" src="http://gameenkaku.altervista.org/it/Immagini/logoPixel.png" alt="GameEnkaku Logo">
				<ul>
        			<li><a href="newHomepage.html">Home</a></li>
        			<li><a href="#">La Storia &#9662;</a>
            			<ul class="dropdown">
               				<li><a href="origini.html">Le origini</a></li>
                			<li><a href="anni60-70.html">Anni '60 e Anni '70</a></li>
                			<li><a href="anni80.html">Anni '80</a></li>
                    		<li><a href="anni90.html">Anni '90</a></li>
                    		<li><a href="anni2000.html">Il nuovo<br>Millennio</a></li>
                    		<li><a href="anni2010.html">Il Futuro</a></li>
            			</ul>
                	</li>
        			<li><a href="#"> Le Console &#9662;  </a>
            			<ul class="dropdown">
               				<li><a href="generazione1.html">I generaz.</a></li>
                			<li><a href="generazione2.html">II generaz.</a></li>
                			<li><a href="generazione3.html">III generaz.</a></li>
                    		<li><a href="generazione4.html">IV generaz.</a></li>
                    		<li><a href="generazione5.html">V generaz.</a></li>
                    		<li><a href="generazione6.html">VI generaz.</a></li>
                    		<li><a href="generazione7.html">VII generaz.</a></li>
                    		<li><a href="generazione8.html">VIII generaz.</a></li>
                    		<li><a href="generazione9.html">Uscite future</a></li>
            			</ul>
        			</li>
        			<li><a href="#">Videogiochi &#9662;</a>
            			<ul class="dropdown">
               				<li><a href="arcadeLista.html">Arcade</a></li>
                    		<li><a href="cartucceLista.html">Cartucce</a></li>
                    		<li><a href="cdLista.html">CD/DVD</a></li>
                    		<li><a href="downloadLista.html">Digital Download</a></li>
                		</ul>
            		</li>
            		<li><a href="#">Approfondimenti &#9662;</a>
            			<ul class="dropdown">
               				<li><a href="letteratura.html">I videogiochi e la letteratura</a></li>
                    		<li><a href="multiplayer.html">Il multiplayer online</a></li>
                    		<li><a href="eSports.html">What is eSports?</a></li>
                            <li><a href="curiosita.html">Curiosit&agrave; e sitologia</a></li>
                		</ul>
            		</li>
    			</ul>
  			</header>
       		<section class="content">
    			<div>Content
                	 a<br> <!--text demo!-->
                     a<br>
               	</div>
  			</section>
  			<footer>
    			<table>
                	<tr>
                    	<th>La Storia</th>
                        <th>Le Console</th>
                        <th>Videogiochi</th>
                        <th>Approfondimenti</th>
                    </tr>
                    <tr>
                    	<td><a href="origini.html">Le origini</a></td>
                        <td><a href="generazione1.html">I generaz.</a></td>
                        <td><a href="arcadeLista.html">Arcade</a></td>
                        <td><a href="letteratura.html">I videogiochi e la letteratura</a></td>
                    </tr>
                    <tr>
                    	<td><a href="anni60-70.html">Anni '60 e Anni '70</a></td>
                        <td><a href="generazione2.html">II generaz.</a></td>
                        <td><li><a href="cartucceLista.html">Cartucce</a></li></td>
                        <td><li><a href="multiplayer.html">Il multiplayer online</a></li></td>
                    </tr>
                    <tr>
                    	<td><a href="anni80.html">Anni '80</a></td>
                        <td><a href="generazione3.html">III generaz.</a></td>
                        <td><a href="cdLista.html">CD/DVD</a></td>
                        <td><a href="eSports.html">What is eSports?</a></td>
                    </tr>
                    <tr>
                    	<td><a href="anni90.html">Anni '90</a></td>
                        <td><a href="generazione4.html">IV generaz.</a></td>
                        <td><a href="downloadLista.html">Digital Download</a></td>
                        <td><a href="curiosita.html">Curiosit&agrave; e sitologia</a></td>
                    </tr>
                    <tr>
                    	<td><a href="anni2000.html">Il nuovo<br>Millennio</a></td>
                        <td><a href="generazione5.html">V generaz.</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                    	<td><a href="anni2010.html">Il Futuro</a></td>
                        <td><a href="generazione6.html">VI generaz.</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                    	<td></td>
                        <td><a href="generazione7.html">VII generaz.</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                    	<td></td>
                        <td><a href="generazione8.html">VIII generaz.</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                    	<td></td>
                        <td><a href="generazione9.html">Uscite future</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
  			</footer>
  			</div>
		<body>
<html>
＆＃13;
＆＃13;
＆＃13;
您还可以在此处查看原始页面： http://gameenkaku.altervista.org/it/standardPage.html。

1 个答案:

答案 0 :(得分：0)

您的页脚正在重叠，因为它位于绝对位置。

来自您的代码： 

footer {
    position: absolute;
    bottom: 0;
    left: 0;
}

使用position: absolute时，您会从文档的normal flow中删除该元素。因此，其他元素不承认它的存在。

由于页脚是列方向弹性容器中的子项...

来自您的代码： 

.flex-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
}

......你不需要绝对定位。

以下是三种可能的替代方案：

  1. 您已将flex: 1应用于兄弟（section.content）。这会强制页脚到底部。基本上，绝对定位无论如何都是多余的。只需将其删除即可解决重叠问题。

  2. 如果您不想依赖flex: 1，可以将justify-content: space-between应用于.flex-container。这会将页脚（作为最后一个兄弟）固定到容器的底部边缘。

  3. 将margin-top: auto应用于footer。

    4. 有关详细信息和其他选项，请参阅：Methods for Aligning Flex Items

相关问题
最新问题