如何避免让页面底部的粘性页脚滚动（而不是窗口底部）？当我从内容和边栏删除高度= 100％时，我不再需要滚动条。但是，这样做时，我的内容和侧栏不会填充页脚的所有空间。css粘性页脚没有滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 13</title> 
<style media="all" type="text/css"> 
* { 
    margin: 0; 
    padding: 0; 
} 
html, body, #wrap, form { 
    height: 100%; 
} 
#wrap, #footer { 
    width: 750px; 
    margin: 0 auto; 
} 
#wrap { 
    background: #cff; 
} 
html, body { 
    color: #000; 
    background: #a7a09a; 
} 
body > #wrap { 
    height: 100%; 
    min-height: 100%; 
} 
form { 
    /*height: auto;*/ 
    min-height: 100%; 
} 
#main { 
    background: #000; 
    height:100%; 
    min-height:100%; 
    height: auto !important; */ 
} 

#content { 
    height:100%; 
    float: left; 
    padding: 10px; 
    float: left; 
    width: 570px; 
    background: #9c9; 
} 
#sidebar { 
    height:100%; 
    float: left; 
    width: 140px; 
    background: #c99; 
    padding: 10px; 
} 
#footer { 
    position: relative; 
    margin-top: -100px; 
    height: 100px; 
    clear: both; 
    background: #cc9; 
    bottom: 0; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
* html .clearfix { 
    height: 1%; 
} 
.clearfix { 
    display: block; 
} 
#header { 
    /*padding: 5px 10px;*/ 
    background: #ddd; 
} 
</style> 
</head> 

<body> 

<form id="form1" runat="server"> 
    <div id="wrap"> 
     <div id="main" class="clearfix"> 
      <div id="header"> 
       <h1>header</h1> 
      </div> 
      <div id="sidebar"> 
       <h2>sidebar</h2> 
      </div> 
      <div id="content"> 
       <h2>main content</h2> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <h2>footer</h2> 
    </div> 
</form> 

</body> 

</html>

来源

2010-02-02 massinissa

在哪个浏览器？ – 2010-02-02 16:05:29

我在Opera 10，IE8和FF3中都得到相同的结果 – massinissa 2010-02-02 16:18:45

我通常使用这个：http://www.cssstickyfooter.com/ 我似乎从来没有看到任何问题。 – zehelvion 2014-06-16 15:55:02

这里是最后一个解决方案（我不记得在那里我得到这个代码....它不是我;-) ）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"> 
<title>CSS Layout - 100% height</title> 
<style type="text/css"> 
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; /* needed for container min-height */; 
    background: gray; 
    font-family: arial,sans-serif; 
    font-size: small; 
    color: #666; 
} 
div#container { 
    position: relative; /* needed for footer positioning*/; 
    margin: 0 auto; 
/* center, not in IE5 */ width: 750px; 
    background: #f0f0f0; 
    height: auto !important; /* real browsers */; 
    height: 100%; /* IE6: treaded as min-height*/; 
    min-height: 100%; /* real browsers */ 
} 
div#header { 
    padding: 1em; 
    /*background: #ddd url("../csslayout.gif") 98% 10px no-repeat;*/ 
    border-bottom: 6px double gray; 
} 
div#content { 
    padding: 1em 1em 5em; /* bottom padding for footer */ 
} 
div#footer { 
    position: absolute; 
    width: 100%; 
    bottom: 0; /* stick to bottom */; 
    background: #ddd; 
    border-top: 6px double gray; 
} 
</style> 
</head> 

<body> 

<div id="container"> 
    <div id="header"> 
     entete </div> 

    <div id="content"> 
     contenu </div> 
    <div id="footer"> 
     pied de page 
    </div> 
</div> 

</body> 

</html>

来源

2010-03-22 01:02:55 massinissa

我已经完成了这个使用100％最小高度的容器div。然后，我有容器中的页面内容和页脚div。这里是我的HTML：

<div id="MainContainer"> 
     <div id="FullPage"> 
     </div> 
     <div id="Footer"> 
     </div> 
</div>

这是我的相应的CSS：

html, body, #MainContainer 
{ 
    min-height: 100%; /*Sets the min height to the height of the viewport.*/ 
    height: 100%; /*Effectively, this is min height for IE5+/Win, since IE wrongly expands an element to enclose its content. This mis-behavior screws up modern browsers*/ 
    margin: 0; 
    padding: 0; 
} 

html > body #MainContainer 
{ 
    height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/ 
} 

#MainContainer 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

#FullPage 
{ 
    height: auto; 
    width: 100%; 
    min-height: 100%; 
    margin: 0; 
    padding: 0 0 25px 0; 
    overflow: hidden; 
} 
#Footer 
{ 
    clear: both; 
    left: 0; 
    width: 100%; 
    height: 20px; 
    position: absolute; 
    bottom: 0; 
}

来源

2010-02-02 16:19:44

我试过你的代码......但是在添加了一些内容后，即使内容仅占用窗口的一部分，也会出现滑块。这是我跟你的CSS使用的HTML：

\t \t

content

\t \t

content

\t \t

content

\t \t

content

\t \t

content

– massinissa 2010-02-03 20:39:38

css粘性页脚没有滚动条

回答

content

content

content

content

content

footer

相关问题