html - CSS:确保页脚位于页面底部和阴影内

标签 html css

我写过如下结构的网页,所有内容都在里面 <div id="wrapper"> .

问题1:如果网页只有几行(或比垂直分辨率短),如何确保左/右阴影可以从上到下显示?

问题2:如果网页只有几行,如何将页脚放在页面底部和左/右阴影内?

如果只更改 CSS,我们将不胜感激。谢谢~

从这里enter image description here对此enter image description here

<html>
<head>
<style>
body {
    margin:0px;
    padding:0px;
}
#mainWrapper {
    width:980px;
    margin:0 auto;
    box-shadow:0 0 10px #999;
}
#wrapper {
    width:960px;
    margin:0px auto 0px auto;
    padding:0px 0px 10px 0px;
    background:#fff;
}
#pageFooter {
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
</style>
</head>    
<body>
<div id="mainWrapper">
    <div id="wrapper">
        ContentContentContent
        <div id="pageFooter">
            FooterFooterFooter
        </div>
    </div>
</div>
</body>
</html>

最佳答案

#pageFooter {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #pageFooter {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

来自 Chris Coyer 的 CSSTricks

关于html - CSS:确保页脚位于页面底部和阴影内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22879606/

相关文章:

javascript 文件中的 css 自动完成(atom 编辑器)

html - body 元素的填充无法正常工作

html - 简单的CSS高度

php - PHP 数据库搜索表单的问题

css - 在屏幕中央居中弹出 div

javascript - 为什么关闭模态会将我的 View 重置为页面顶部

css - 什么时候为 CSS3 开发是安全的

CSS 列内的 CSS 转换消失 (Chrome)

jQuery addClass 属性出现然后消失

css bootstrap 在列表中使用 active <li>