页脚在视口底部，不与内容重叠 [英] footer on bottom of viewport without overlaping with content

问题描述

我需要的是一个非常基本的布局，只有两个主要部分：内容和页脚。
页脚应该总是在视口的底部。
所以我有：

• 内容（位置：相对）


• ：fixed; bottom：0px）
  当我几乎没有内容时，这种方式有效（请参见 image 1 < a>）。

当视口太短或有很多内容时，问题就开始了（见 image 2 ）。

内容落后于页脚（重叠），并显示页面滚动。

我不想要它在前面。
我想要的是这个（请参阅 image 3 ）

内容与页脚不重叠，页面滚动只滚动内容div。

我不知道以完成它，即使它可以做到。
我不介意使用jquery，我不在乎ie6。
任何帮助将非常感谢

感谢

EDIT

感谢回复。

我正在上传几张图片，需要。

在图片1中 http：// estudioibarra .com / test / image1.jpg ，您可以看到我想要的设计，并在图片2中 http ：//estudioibarra.com/test/image2.jpg 是一样的图片，有一些解释。

我想要的是标题总是在视口底部因为是我的菜单。我不想让内容与我的菜单重叠。因为内容将有超过3个项目。

我不想要的是这 http://estudioibarra.com/test/image3.jpg （内容显示在菜单后面）。

你的解决方案我可以解决，但只有当我有一个滚动容器div。我真的不喜欢这样。

是否使用主页滚动滚动容器内容？

再次感谢您的时间

解决方案

如何简单地制作内容和页脚 position：fixed ，然后根据您的需要放置，例如： http://jsfiddle.net/bAtVE/ ？

  #content {
 position：fixed; 
 height：85％; 
 width：95％; 
 border：1px blue solid; 
 overflow-y：auto; 
} 
 
 #footer {
 position：fixed; 
 height：10％; 
 width：95％; 
 bottom：0; 
 border：1px red solid; 
} 
  

---

 < div id =content> 
这里是content 
< / div> 
< div id =footer> 
这是页脚
< / div> 
  

EDIT ：

这次使用 position：absolute （请参阅 http ：//jsfiddle.net/bAtVE/1/ ）。这可能是一个更好的做法，因为固定位置不是跨浏览器兼容。

  #content {
 position：absolute; 
 top：0; 
 left：0; 
 height：85％; 
 width：100％; 
 overflow-y：auto; 
} 
 
 #footer {
 position：absolute; 
 bottom：0; 
 left：0; 
 height：10％; 
 width：100％; 
} 
  

EDIT2 ：

http://jsfiddle.net/bAtVE/2/ p>

What I need is a very basic layout with only 2 main parts: content and footer. The footer should always be on bottom of viewport. So I have:

• Content (position:relative)
• Footer (position: fixed; bottom:0px) That works grate when I have few content (see image 1).

The problem starts when the viewport is too short or have lots of content (see image 2).

The content goes behind the footer (overlaping) and the page scroll appears.

I don't want it to go in front either. What I would like is this (see image 3)

The content doesn't overlap with the footer, and the page scroll only scroll the content div.

I don't know how to accomplish that or even if it can be done. I don't mind using jquery and I don't care for ie6. Any help would be very appreciated

Thanks

EDIT:

Thanks for the reply's.

I'm uploading a couple of images so you can better understand what I need.

In image 1 http://estudioibarra.com/test/image1.jpg you can see the design I want, and in Image 2 http://estudioibarra.com/test/image2.jpg is the same image with some explanations.

What I want is the header always on bottom of viewport because is my menu. And I don't want the content to overlap with my menu. because the content will have more than 3 projects.

What I don't want is this http://estudioibarra.com/test/image3.jpg (content appearing behind menu).

With some of your solutions I can solve that, but only if I have a scroll in the container div. I really don't like that.

Is there to use the main page scroll to scroll the container content??

Thanks again for your time

解决方案

How about simply making both content and footer position: fixed and place them however you want, like this demo: http://jsfiddle.net/bAtVE/?

#content {
    position: fixed;
    height: 85%;
    width: 95%;
    border: 1px blue solid;
    overflow-y: auto;
}

#footer {
    position: fixed;
    height: 10%;
    width: 95%;
    bottom: 0;
    border: 1px red solid;
}

---

<div id="content">
    here is content
</div>
<div id="footer">
    This is footer
</div>

EDIT:

I used position: absolute this time (see http://jsfiddle.net/bAtVE/1/). It is probably a better practice, as fixed position is not as cross-browser compatible.

#content {
    position: absolute;
    top: 0;
    left: 0;
    height: 85%;
    width: 100%;
    overflow-y: auto;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10%;
    width: 100%;
}

EDIT2:

http://jsfiddle.net/bAtVE/2/

这篇关于页脚在视口底部，不与内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！