CSS：确保页脚在页面底部和阴影内 [英] CSS: Make sure footer at the bottom of the page and inside the shadow
问题描述
我已编写了如下所示的网页结构，所有内容都在< div id =wrapper> 。
问题1：如果网页只有几行（或短于垂直分辨率）如何确保左/右阴影可以从上到下显示？ / p>
问题2：如果网页只有几行，我如何将页脚放在页面底部和左/右-shadow？
如果只改变CSS，这是值得赞赏的。 THX〜
从此到
< 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>
所以idk如果我理解好， getsticky footer
http：// ryanfait。 com / sticky-footer / < -one此处
和在jQuery中
$（window）.bind（load，function（）{
var footer = $（footerselector）;
var pos = footer.position b $ b var height = $（window）.height（）;
height = height - pos.top;
height = height - footer.height（）;
if（height> 0）{
footer.css（{'margin-top'：height +'px'}）;
}
}）;
I have written webpages like below structure and all the contents are inside <div id="wrapper">.
Problem 1: If the webpage is only few lines (or shorter than the vertical resolution) How can I make sure the left/right-shadow can be appear from top to bottom?
Problem 2: If the webpage is only few lines, how can I place the footer at the bottom of the page and inside the left/right-shadow?
It is appreciated if only CSS be changed. THX~
From this to this
<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>
So idk if i understood good there are few ways to get "sticky footer"
http://ryanfait.com/sticky-footer/ <-one here
And in jQuery
$(window).bind("load", function() {
var footer = $("footerselector");
var pos = footer.position();
var height = $(window).height();
height = height - pos.top;
height = height - footer.height();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
});
这篇关于CSS：确保页脚在页面底部和阴影内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
