如何使用DIV创建类似表格的CSS布局? [英] How to create a table-like CSS layout with DIVs?

问题描述

更新2

我找到了一种暂时的解决方案，该解决方案目前在Mac OS X上的Chrome中对我有效..但是，问题在于这两列自然不会到达页脚...我通过JavaScript强制高度.

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

CODE

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

问题

1. 第一个大问题:如何进行设置，以使这些列的高度达到下面的页脚?我希望这样做，以便在页面加载时，粉色和蓝色列都自动到达底部.

2. 如何获取该信息，以便当粉红色的列超过当前高度时，会出现一个本地滚动条，但是当蓝色的列超过当前高度时，会出现整个页面的滚动条，并且页脚会被向下推?

 -基本上，我希望粉红色和蓝色列的高度始终保持相同，但高度仅由蓝色列确定；蓝色占主导地位，因此可以扩大两列的高度；粉色无法扩展高度，只能与蓝色相同 

3. 能否仅使用CSS来实现此功能?

让我知道是否需要澄清任何事情.

解决方案

基于您的

您的版本跌倒了，因为当您缩小窗口内容时，窗口的内容就会从侧面消失..但是基于其背后的思想-我已经使用您的逻辑对其进行了扩展，并在粘性页脚，顶部菜单中建立了-在原始示例链接中.

页脚不是全角，，但是您可以通过在 html 元素上放置背景图像来使它看起来像原来一样，我的小提琴中有一个普通的虚拟图像，但不是出现时，无论如何，您都将使图像的高度/颜色与内置1px边框的页脚相同

这绝对取决于您能够修复/计算粉色/蓝色列上方所有内容的高度

此操作所需的容器div少得多，并且内容现在位于源代码中的侧边栏之前

这是小提琴:全尺寸: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 :)

---

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

这篇关于如何使用DIV创建类似表格的CSS布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！