如何将div对齐到页面底部，而不是屏幕底部 [英] How to align div to bottom of the page, not bottom of the screen

问题描述

我想将div对齐到PAGE的底部，而不是屏幕的底部。当我这样做：

 ＃contact-block {
 position：absolute; 
 bottom：0;左：0; 
} 
  

，div位于屏幕的底部。当我的页面很长时，我必须向下滚动，并且div应该在底部，浮动在中间某处。

可能有一个简单的解决方案

 <$> 
这是我的HTML： c $ c>< div id =left> 
< div id =submenu> < span class =menutitle>服务< / span> 
< ul> 
< / ul> 
< / div> 
 
< div id =contact-block> 
< span class =contacttitle>联系人< / span>< / div> 
< / div> 
< div id =content> 
< / div> 
  

我还添加了一个图像来说明我的意思：

红色div是联系人div。

编辑：
我发现了一个使用jQuery和CSS的解决方案。这可能不是最好的解决方案，但它的工作原理。

jQuery：

  var offset = $（document）.height（） -  $（＃contact-block）。height（） -  $（＃footer）。 
 $（＃contact-block）css（top，offset）; 
 $（＃contact-block）。css（left，$（＃wrapper）。 
  

CSS：

 code>＃contact-block {
 position：absolute; 
 width：216px; 
 height：100px; 
 background：url（../ img / contact-bg.jpg）repeat-x＃5c5c5c; 
} 
  

解决方案

您的 div 到位。这个技术需要一个 #wrapper 元素，我不是粉丝，但嘿，你得做watcha必须做。

在这个例子中，我完全删除了 #left div

HTML：

 < div id =wrapper> 
< div id =submenu>这是services< / div> 
< div id =contact-block>这是联系人< / div> 
< div id =content>这是内容< / div> 
< / div> 
  

CSS：

  #wrapper {position：relative; width：960px; } 
 #submenu {position：absolute; left：0; top：0; width：320px; height：320px; } 
＃contact-block {position：absolute; left：0; bottom：0; width：320px; height：160px; } 
 #content {position：relative; left：320px; right：0; top：0; width：640px; height：640px; } 
 // #content position是相对的#wrapper伸展。 left属性等于#submenu或＃​​contact-block元素的宽度。 
  

这种技术的一个好处是它给你更干净的HTML。如果需要，我相信会更容易制作您的版本的移动版本。

小提琴： http://jsfiddle.net/remibreton/JYq7S/

其他想法：
#wrapper 元素可以很容易地被移除，以支持 body 元素，这是一个语义HTML的伟大一步。看一下这个！ http://csswizardry.com/2011/01/ use-the-body-element-as-a-wrapper /

I want to align a div to the bottom of the PAGE, not to the bottom of the screen. When I do this:

#contact-block{
position: absolute; 
    bottom: 0; left: 0; 
}

, the div is placed in the bottom area of the screen. When my page is long, I have to scroll down and the div which should have been at the bottom, floats somewhere in the middle.

There might be a simple solution to this, but I'm just not seeing it.

Here's my HTML:

<div id="left">
<div id="submenu"> <span class="menutitle">Services</span>
  <ul> 
  </ul>
 </div>

 <div id="contact-block">
 <span class="contacttitle">Contact</span></div>
</div>
<div id="content">
</div>

I've also added a little image to illustrate what I mean:

The red div is the contact div.

Edit: I've found a solution with jQuery and CSS. This might not be the best solution, but hey, it works.

jQuery:

var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60;
$("#contact-block").css("top", offset);
$("#contact-block").css("left", $("#wrapper").position().left);

CSS:

#contact-block {
position : absolute;
width:216px;
height:100px;
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c;
}

解决方案

You could absolute-position the your divs in place. This technique requires a #wrapper element, which I'm not a fan of, but hey, you gotta do watcha gotta do.

In this example I removed the #left div entirely as it was only required for layout purposed and is no longer necessary.

HTML:

<div id="wrapper">
    <div id="submenu">This is services</div>
    <div id="contact-block">This is contact</div>
    <div id="content">This is content</div>
</div>​

CSS:

#wrapper { position:relative; width:960px; }
#submenu { position:absolute; left:0; top:0; width:320px; height:320px; }
#contact-block{ position:absolute; left:0; bottom:0; width:320px; height:160px; }
#content { position:relative; left:320px; right:0; top:0; width:640px; height:640px; }
// #content position is relative for the #wrapper to stretch. The left property is equal to the width of the #submenu or #contact-block element.

A good point of this technique is that it gives you cleaner HTML. I believe it will be easier to make a mobile version of your version if the need arise.

The fiddle: http://jsfiddle.net/remibreton/JYq7S/

Additional thought: The #wrapper element could easily be removed in favor of you body element, which is a great step towards semantic HTML. Check this out! http://csswizardry.com/2011/01/using-the-body-element-as-a-wrapper/

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