复杂的CSS布局...需要一些帮助 [英] complicated CSS layout... need some help

问题描述

UPDATE 2

我发现了一个暂时的解决方案，目前适用于Mac OS X上的Chrome。。然而，问题是，这两列没有自然到达页脚...我通过JavaScript强制的高度。

无论如何，所有相关的代码可以在小提琴中看到。

CODE

http://jsfiddle.net/UnsungHero97/XrJMa/embedded/result/

问题

1. 第一个大问题：如何设置这些列的高度到达下面的页脚？我想要这样，当页面加载时，粉红色和蓝色的列都自动到达底部。



2. 如何获得它，超过其当前高度时，会出现一个局部滚动条，但是当蓝色列增长超过其当前高度时，总页面滚动条出现，页脚被下推？
   
   
   
   
   
   • 基本上，我想要粉红色和蓝色列的高度总是相同的高度，但高度只由蓝色列决定;蓝色是主导的，所以它可以扩大两列的高度;
   
   

   • 这个功能是否可以使用CSS实现？

   / p>
   

如果我需要澄清任何内容，请通知我们。

解决方案

，基于您的最新回答，我认为你不需要页脚是全宽（只有粘，虽然你的不是），我也假设你知道你的版本将只有工作，如果你知道的高度 foo - 不是那么重要的内容，因为你需要的高度来设置侧边栏的顶部坐标。

你的版本下降，当你缩小窗口内容消失了两侧..但基于它背后的思想 - 我已经使用你的逻辑扩展它，并内置在粘性页脚，顶级菜单 - 一切都在原始的示例链接。

页脚不是全宽，，但你可以让它看起来像是通过在 html 元素，我有一个简单的虚拟图像在我的小提琴，但它不显示，无论如何，你会使一个图像与页脚相同的高度/颜色与1px的边框建在

这绝对依赖于你能够修正/计算粉红色/蓝色列之上的一切的高度

有很多需要更少的容器div和内容现在在源中的侧边栏之前

这里是小提琴： fullsize ：编辑

UPDATE 2

I found a tentative solution that currently works for me in Chrome on Mac OS X. You can check out my answer below for details. For those of you who are still trying to come up with CSS only solutions or JavaScript solutions, please keep going and let me know what you come up with! Please :)

UPDATE

The answer below is really close to an all CSS solution, so I'm going to try to make it work. In the meantime, I'm opening up this question to JavaScript solutions as well. How would you do it using JavaScript? All solutions are now welcome :)

---

Hey guys, let's see if we can solve this one together!

I'm trying to set up a layout, check out the image...

I'm using the "sticky footer" technique, which works great, and I've set it up so that whenever one of the two columns gets taller, the other will also match its height, as described in this article. The problem, however, is that these two columns don't reach the footer naturally... I'm forcing the height through JavaScript.

Anyway, all the relevant code can be seen in the fiddle...

CODE

http://jsfiddle.net/UnsungHero97/XrJMa/embedded/result/

QUESTIONS

1. First big problem: how can I set it up so that the height of these columns reaches the footer below? I want it so that when the page loads, both pink and blue columns reach the bottom automatically.

2. How can I get it so that when the pink column grows beyond its current height, a local scrollbar appears, but when the blue column grows beyond its current height, the overall page scrollbar appears and the footer is pushed down?

   • basically, I want the height of the pink and blue columns to ALWAYS be the same height but the height is only determined by the blue column; blue is dominant so it can expand the height of both columns; pink cannot expand the height, just be at the same height as blue

3. Can this functionality be achieved using only CSS?

Let me know if I need to clarify anything.

解决方案

based on your most recent answer, I take it you don't need the footer to be full width (only sticky, though yours isn't) and also I presume you know that your version will only work if you know the height of the "foo - not so important content", as you need the that height to set the top co-ordinate for the sidebar .

You version falls down in that when you narrow the window content disappears off the sides.. but based on the thinking behind it - I've used your logic extended it and built in the sticky footer, top menu - everything that was in the original example link.

the footer's not full width, but you can make it look like it is by putting a background image on the html element, I have a plain dummy image in my fiddle but it's not showing up, anyway you would make an image the same height/color as the footer with the 1px border built in

this absolutely relies on you being able to fix/calculate the height of everything above the pink/blue columns

there is a lot less container divs needed for this and the content is now before the sidebar in the source

Here's the fiddle : fullsize : to edit

这篇关于复杂的CSS布局...需要一些帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！