固定布局+宽内容=表格？ [英] fixed layout + wide content = tables?

问题描述

我有一个固定宽度布局的网页。它之前使用过表格，我使用div重新创建它。一般来说，我对它感到满意（现在页脚很好地贴在底部）。

但有一个问题 - 我无法控制内容，有时它可能包含非常宽的元素。在当前（div）布局中，如果元素不适合屏幕显示，则必须向右滚动（无法避免），并且页面框架结束，您将看到空白区域（即没有页眉，页脚）。

原因是div只展开到可见窗口。

我只看到两个解决方案：

• 返回到表格布局。它正在为这种情况正常工作 - 如果内容更广泛，它将扩展到窗口框架之外。
实现JavaScript解决方案，它将检查宽度并在需要时展开它。但我认为这是错误的。

有没有更好的解决方法？我希望实现与表格类似的行为，但使用div。

请让我知道是否需要更多信息，谢谢。 b
$ b

编辑：我需要它在IE6上工作（或者至少IE7，如果IE6看起来不丑）和上面的+所有现代浏览器。

编辑2：下面是一个例子，你可以看到我在说什么： http://jsfiddle.net / wxrJU / 6 / 。如果向右滚动，则可以看到有空白区域 - div框架不会展开。如果有人可以提供在jsfiddle中实现的解决方案，我将不胜感激：）。

解决方案

IE6或7，但它可能正朝着正确的方向发展......

http://jsfiddle.net/wxrJU/10/

I have a webpage which has fixed width layout. It used tables before and I re-created it using divs. In general I am happy with it (footer sticks to the bottom nicely now).

But there is a problem - I cannot control the contents and sometimes it can contain very wide elements. In current (divs) layout, if element doesn't fit to screen you have to scroll right (you can't avoid that) and there page frame ends, you would see blank space (i.e. no header, footer).

The cause of it is that div only expands to visible window.

I see only two options of how to solve it:

• go back to tables layout. It was working correctly for this case - was expanding beyond the window frame if content is wider.
• implement JavaScript solution which will check the width and expand it if needed. But I think it's just wrong.

Is there any better way to solve it? I'd like to achieve similar behavior as with tables, but using divs.

And please let me know if you need any more info, thanks.

EDIT: I need it working on IE6 (or at least IE7 if IE6 doesn't look ugly) and above + all modern browsers.

EDIT2: Here is an example where you can see what I am talking about: http://jsfiddle.net/wxrJU/6/. If you scroll right you can see that there's blank space - divs frame doesn't expand. If someone could provide solution implemented in jsfiddle as well, I would appreciate it :).

解决方案

I haven't tested this in IE6 or 7, but it might be moving in the right direction...

http://jsfiddle.net/wxrJU/10/

这篇关于固定布局+宽内容=表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！