Css 100％身高：重新调整页面时，页脚滚动到内容页面

我一直在关注如何通过此SITE制作我的网页css 100％高度的教程。我能够实现我想要的，但现在我遇到了我的页脚问题。每当我调整页面的大小时，页脚会稍微向上滚动到内容中。有没有办法阻止它？这里是我的Live EXAMPLE Css 100％身高：重新调整页面时，页脚滚动到内容页面

谢谢

CSS

<style> 
html, body { 
    margin:0; 
    padding:0; 
    height:100%; /* needed for container min-height */ 
    background:#333333; 
    font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif; 
    font-size:small; 
    color:#5e5e5e; 
    line-height: 130%; 
} 


/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/ 

#colorblock { 
    position: absolute; 
    top: 60px; 
    left: 0px; 
    background: #c69a55; 
    z-index: 0; 
    height: 65px; 
    width: 100%; 
    padding: 0px; 
    margin: 0px; 
} 

/**************************************************/ 



div#container { 
    position:relative; /* needed for footer positioning*/ 
    margin:0 auto; /* center, not in IE5 */ 
    width:925px; 
    background:#f0f0f0; 
    height:auto !important; /* real browsers */ 
    height:100%; /* IE6: treaded as min-height*/ 
    min-height:100%; /* real browsers */ 
    border-right: 15px solid #000000; 
    border-left: 15px solid #000000; 

} 

div#contentArea { 
    padding:1em 1em 5em; /* bottom padding for footer */ 

} 
    div#contentArea p { 
     text-align:justify; 
     padding:0 1em; 
    } 

#content { 
    margin-left: 240px; 
    margin-right: 0 auto; 
    background: #ebebeb; 
    padding: 5px; 
    width:635px; 
    height: 400px; 

} 

/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/ 
div#header { 
    /*padding:1em;*/ 
    height: 175px; 
    border-top:15px solid #000000; 

} 
    div#header p { 
     margin:0; 
    } 



/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/ 

#left2 { 
    float: left; 
    width: 200px; 
    background: #dddddd; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    margin-right: 15px; 
    padding: 5px; 
    height: 400px; 
} 


/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/ 


div#footer { 
    position:absolute; 
    width:100%; 
    bottom:0; /* stick to bottom */ 
    background:#7A7A7A; 
    border-bottom:15px solid #000000; 
} 
    div#footer p { 
     padding:1em; 
     margin:0; 
    } 

a.footer { 
    color: #c7c7c7; 
    font-size: 80%; 
    padding-right: 20px; 
    letter-spacing: 1px; 
} 


p { 
    margin:0 0 1em; 
} 

</style>

来源

2012-06-28 CodingWonders90

将margin-bottom:60px;加到#content css的定义中。

完全块：

#content { 
    margin-left: 240px; 
    margin-right: 0 auto; 
    margin-bottom: 60px; 
    background: #ebebeb; 
    padding: 5px; 
    width:635px; 
    height: 400px; 
}

来源

2012-06-28 04:29:40

既然你有一个明确的高度对你的内容的div设置，你可以这样做：

padding-bottom:36px;您的div＃容器第32行

但是，如果您的内容div的高度发生变化，它可能会不再考虑那个填充。

来源

2012-06-28 04:28:18

Css 100％身高：重新调整页面时，页脚滚动到内容页面

回答

相关问题