HTML页脚不留在页面的底部

我做了一个HTML页面，其中包括一个标题，3列（左，主和右）和页脚。在主栏中我有一个高度为100％的桌子，非常大。现在我想让我的脚在桌子下面。HTML页脚不留在页面的底部

我不知道什么是错，但我的页脚不是放在底部，在我的情况下，它几乎在主表的中间。

html，body和main类也被设置为高度100％，所以工作完美。唯一的问题是页脚..

根据要求，这里是一些代码：

<body> 
<div id="wrap"> 
<div id="hoofding"></div> 
<div id="inner-wrap"> 
<div id="navigatie" style="font-family:old stamper"> 
    <a href="index.html" class="C1"><font size="9">Home</font></a> 
</div> 
<div id="main"> 
<div id="right"></div> 
<table id= "tabel1"> 
<div id="inhoud"> 
<tr><td><p style="font-family:army of darkness"><font size="30">Lettertype 1: The Quick Brown Fox</font></p></td></tr>    
<tr><td><p style="font-family:USSR army"><font size="30">Lettertype 2: The Quick Brown Fox</font></p></td></tr> 
</div> 
</table> 
</div> 
</div> 
</div> 
<div id="footer"><font size="1">Copyright &copy 2013 The Pack</font></div> 
</body>

而CSS文件：

html {height:100%; width: 100%;} 

    body { 
    margin:0; 
    padding:0; 
    height:100%; 
    width: 100%; 
    background-color: blue; 
    } 

    #hoofding{ 
    margin-right: auto; 
    margin-left: auto; 
    height: 355px; 
    width: 620px; 
    background-image: url(Afbeeldingen/The%20Pack.png); 
    } 
    #navigatie{ 
     z-index: 15; 
     position: fixed; 
    height: 50px; 
    width: 8%; 
    margin-right: auto; 
    margin-left: auto; 
    padding-right: 1%; 
    padding-left: 1%; 
    } 
#inhoud{ 
     z-index: 2; 
    position: absolute; 
    padding-top: 3%; 
    padding-bottom: 3%; 
    } 

    #tabel1{ 
     height: 100%; 
    width: 70%; 
    z-index: 1; 
    background-image: url(Afbeeldingen/Inhoud.png); 
    margin-left: auto; 
    margin-right: 15%; 
    bottom: 0; 
    padding:15px; 
    } 

    #wrap { 
     position:relative; 
     min-height:100%; 
     } 
    * html #wrap {height:100%; width:100%} 

    #inner-wrap { 
     padding-bottom:20px; 
     } 
    #inner-wrap:after { 
     content:" "; 
     display:block; 
     clear:both; 
     } 
    #footer { 
     position:absolute; 
     height:18px; 
     background-color: red; 
     bottom:0px; 
     color:white; 
     text-align:center; 
     clear:both; 
      } 

    #left { 
     position:fixed; 
     float:left; 
     width:10px; 
     text-align:center; 
     } 
    #main { 
     position:absolute; 
     margin-left:10px; 
     margin-right:10px; 
     width: 100%; 
     height: 100%; 
     } 

    #right { 
     float:right; 
     width:10px; 
     text-align:center; 
     } 
    #content { 
    padding:5px; 
    margin-right:10px; 
    text-align:left; 
     }

谢谢

来源

2013-06-11 misterkill38

你能制造一个JsFiddle吗？链接[JsFiddle]（http://www.jsfiddle.net） –

我从来没有这样做过，但我会尝试。请稍等，我试图弄清楚。 – misterkill38

填写您的HTML（左边框）和Css（右边框），然后按保存..您可以复制网址并将其粘贴到此处 –

尝试：

#footer{ 
    position:absolute; 
    bottom: 0px; 
    text-align: center; 
}

来源

2013-06-11 17:39:58

这不起作用，它使情况变得更糟..现在页脚被放置在屏幕的底部，当我滚动它时，它会向上移动。而且文本位于左侧而不是中间。 – misterkill38

现在检查出来！顺便说一句，你不想让它坚守底部？ –

那也行不通。是的，我想在底部，但在屏幕的底部而不是屏幕。在我的屏幕停止的地方放置了页脚，但是我的页面更长，所以我必须向下滚动才能看到页面的结尾，那是我想要的页脚。 – misterkill38

使用

bottom: 0;

而不是

margin-bottom: 0;

我认为它会为你工作。

来源

2013-06-11 17:40:55 wakqasahmed

这不起作用，页脚停留在同一个地方？ – misterkill38

如果你分享更多的代码，这将是很好的。 – wakqasahmed

HTML页脚不留在页面的底部

回答

相关问题