CSS：确保页脚在页面底部和阴影内

本文介绍了CSS：确保页脚在页面底部和阴影内的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已编写了如下所示的网页结构，所有内容都在< 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

< -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：确保页脚在页面底部和阴影内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！