css-在页脚下方显示大量空间 [英] css-showing lot of space below footer

问题描述

在此链接上查看图像:

https://docs.google.com/document/d/1r9L9eLBddMOdHAP3KfAx8ND-SF8b8zBl53o88aUbHT4/edit?pli = 1

在上面的图像链接中，我用黑色矩形覆盖了页脚，我希望它应该始终位于底部的最后，而底部没有任何空白.

实际上，当我删除页脚上方的div时出现了问题.我正在为您提供对此负责的代码:

HTML

 < div id ="footer">< div class ="shell"><！-这里的内容-></div></div> 

CSS

  .shell {width:988px;margin:0自动;}#footer {高度:44px;背景:url(images/footer.gif);line-height:44px;颜色:#fff;}#footer a {color:#fff;} 

位于页脚上方的div-box的CSS.实际上，当我编辑底部距时这是负责任的，但是我想知道如何在页脚没有底部的情况下制作页脚.同时，div-box的CSS是:

  .box {背景:#fbfcfc;高度:100％;内边距:1px;底边距:10px;} 

当我执行margin-bottom:140px时，它在末尾显示页脚.但是我仍然想知道如何使底部的页脚没有底部或底部的空白，无论内容是短还是大.

请分享您的知识！

解决方案

更新:我的一个同事也遇到了类似的问题，而我只是偶然想到这一次也许仅使用CSS即可轻松解决.一个简单的基于高度的媒体查询在这里非常适合页脚应该位于内容的底部，除非内容比视口短，在这种情况下，页脚应与视口的底部对齐".如果是这样的话.也许这应该效果最好: http://codepen.io/scrimothy/pen/qEivg

最终，使用媒体查询获取高度，并确定视口高度是大于还是小于主体和页脚的高度.然后，使用链接查询中所示的媒体查询以不同的方式处理这些事件.

方法1:始终位于底部

如果您尝试使其始终位于底部，则可以进行设置

 页脚{位置:绝对；底部:0;} 

但是，这意味着如果页面内容长于视口，则与页脚文本后面的正文会发生冲突.

方法2:最小高度

您还可以在主体内容div上设置 min-height ，以便您可以近似地认为用户的视口将位于:

  .body-content {最低高度:580px；} 

这不会总是得到的，因此您可能会在主体内容和页脚之间留出太多空间(将页脚推到折痕下方)，或者如果用户将视线的页脚和底部之间仍然留有空隙窗户比您预期的要高.

方法3:jQuery(两全其美)

如果您已经在网站中使用jQuery，这就是方法.

  var pageHeight = $('body').height()，footerHeight = $('footer').height();如果(pageHeight< $(window).height()-footerHeight){$('footer').css({'position':'absolute'，'底部':'0'});} 别的 {$('footer').css({'位置': ''，'底部': ''});} 

如果页面较长，这将使页脚与内容正常对齐；如果页面较短，它将使用上面的方法1.(将css属性设置为"，可将其从嵌入式样式中删除，从而将其恢复为定义的设置.)

这是一个带有简短文本的演示和一个带有长文本的

See the image at this link:

https://docs.google.com/document/d/1r9L9eLBddMOdHAP3KfAx8ND-SF8b8zBl53o88aUbHT4/edit?pli=1

In the above image link, i have covered footer in black rectangle and i want it should be always on bottom last without any margin from bottom.

Actually the problem arose when i deleted a div above the footer. I am giving you the code responsible for this:

HTML

<div id="footer">
<div class="shell">
      <!--content here-->
    </div>
     </div>

CSS

.shell { width:988px; margin:0 auto; }
  #footer { height:44px; background:url(images/footer.gif); line-height:44px;
     color:#fff;              
       }
     #footer a{ color:#fff; }

The css of div-box which is just above the footer. Actually this is responsible when i edited the margin-bottom yet i want to know how to make footer without space from bottom. Meanwhile CSS for div-box is:

    .box { background:#fbfcfc; height:100%; padding:1px; margin-bottom:10px; }

When i did margin-bottom:140px, it shows footer at the end. but i still want to know how to make footer at the bottom without space from bottom whether content is short or large.

Please share your knowledge!

解决方案

UPDATE: A coworker of mine just had a similar problem and I just happened to think this time that maybe this could easily be answered with CSS only. A simple height-based media query would work perfectly here for "a footer that should be at the bottom of content unless content is shorter than the viewport, in which case the footer should align to the bottom of the viewport" moment. If that's the case. Probably this should work best: http://codepen.io/scrimothy/pen/qEivg

Ultimately, use a media query for height and determine if the viewport height is taller or shorter than the height of the body and footer. Then handle those events differently with the media query as shown in the link.

Method 1: always on bottom

If you're try to make it always rest on the bottom, you can just set

footer {
  position: absolute;
  bottom: 0;
}

However, this would mean that if your page content is longer than the viewport, then you'll have a conflict with the body running behind the footer text.

Method 2: min-height

You could also set a min-height to your body content div so that you can approximate where you think your users' viewports will be:

.body-content {
  min-height: 580px;
}

This won't get it always so you'll possibly have too much space between body content and footer (pushing the footer below the fold) or you could still have a gap between the footer and bottom of the viewport should the user have a taller window than you expected.

Method 3: jQuery (best of both worlds)

If you're already using jQuery in your site, this is the way to go.

var pageHeight = $('body').height(),
  footerHeight = $('footer').height();
if (pageHeight < $(window).height() - footerHeight) {
  $('footer').css({
    'position': 'absolute',
    'bottom': '0'
  });
} else {
  $('footer').css({
    'position': '',
    'bottom': ''
  });
}

This will allow your footer to fall in line normally with your content if it's a long page, or it'll use Method 1 above if it's a short page. (Setting css properties to '', removes them from the inline styles, thereby putting them back to their defined settings).

Here's a demo with short text and one with long text

这篇关于css-在页脚下方显示大量空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！