将DIV对齐到页面底部 [英] Align DIV to bottom of the page

问题描述

我有一个需要与搜索结果页底部对齐的DIV，问题是每当有没有搜索结果或

I have a DIV that needs to be aligned to the bottom of a search result page, problem is whenever there is no search result or less rows of search result displayed on the page, the DIV goes up from the bottom of the page.

：//i.stack.imgur.com/kdirS.jpgalt =enter image description here>

但应该放置如下

并且每当有更多行，并且页面可以向下滚动，DIV应该像这样放置。

and whenever there are more rows and the page can be scrolled down, the DIV should be place like this.

我的currrent代码看起来像这样

My currrent code looks like this

        <div id="bottom-stuff>

            <div id="bottom">
                             // DIV stuff
            </div>

        </div>


#bottom-stuff {
    padding: 0px 30px 30px 30px;
    margin-left:150px;
    position: relative;
}

#bottom{

    position: absolute; bottom: 0px; 
}

推荐答案

<div id="con">
   <div id="content">Results will go here</div>
   <div id="footer">Footer will always be at the bottom</div>
</div>

CSS：

CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
div {
    outline: 1px solid;
}
#con {
   min-height:100%;
   position:relative;
}
#content {
   height: 1000px; /* Changed this height */
   padding-bottom:60px;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
}

这个演示的内容高度 height：1000px ; ，因此您可以看到底部滚动的内容。

This demo have the height of contentheight: 1000px; so you can see what it would look like scrolling down the bottom.

DEMO HERE

此演示的内容高度 height：100px

This demo has the height of content height: 100px; so you can see what it would look like with no scrolling.

DEMO HERE

这样会将页脚移到div / code>但是如果内容不大于屏幕（不滚动），页脚将坐在屏幕的底部。想想这是你想要的。

So this will move the footer below the div content but if content is not bigger then the screen (no scrolling) the footer will sit at the bottom of the screen. Think this is what you want. Have a look and a play with it.

更新的fiddles让它更容易看到背景。

Updated fiddles so its easier to see with backgrounds.

这篇关于将DIV对齐到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！