简体繁体 English

将元素的宽度增加到固定宽度页面上的页面宽度

[英]Increasing width of element to page width on fixed-width page

原文 2011-09-04 03:22:23 6 2 javascript/ jquery/ html/ css

I have a site that is a fixed width, within the content area I am displaying a log viewer. 我在显示日志查看器的内容区域内有一个固定宽度的站点。

The log viewer is hard to read as it is confined by the fixed width of the site and the log lines are quite long. 日志查看器很难阅读，因为它受站点固定宽度的限制，并且日志行很长。

What I want to do is above the log viewer have a button that says "Expand", when clicked the log viewer's width would grow to be just slightly less than the size of the viewport. 我想做的是在日志查看器上方有一个“扩展”按钮，单击该按钮时，日志查看器的宽度将变得略小于视口的大小。

The rest of the site would still remaine fixed width but the log viewer would be as wide as the screen. 该站点的其余部分仍将保持固定宽度，但日志查看器将与屏幕一样宽。

I've drawn an image of what I want to achieve here: 我在这里画出了我想要实现的目标：

在此处输入图片说明

http://imgup.co.nz/3940 http://imgup.co.nz/3940

I have tried setting "position: absolute; left: 20px" (As well as setting the width) but this causes the footer of my site to move up to be under the log viewer (As the log viewer is no longer increasing the height of the content area). 我尝试设置“位置：绝对；左：20像素”（以及设置宽度），但这会导致网站的页脚向上移动到日志查看器下方（因为日志查看器不再增加高度）内容区域）。

I'm not sure what to do, it should all be css related I believe. 我不确定该怎么做，我认为这全都应该与CSS相关。

Any help would be much appreciated! 任何帮助将非常感激！

2 个解决方案

Try this: http://jsfiddle.net/h4C2p/ 试试这个： http : //jsfiddle.net/h4C2p/

EDIT: Sorry, that won't work for different widths. 编辑：对不起，这不适用于不同的宽度。 Here is one that works: http://jsfiddle.net/h4C2p/1/ 这是一个可行的方法： http : //jsfiddle.net/h4C2p/1/

if you don't mind setting a height for the content area, set it for the parent of the element of wherever you show the log. 如果您不介意为内容区域设置高度，则将其设置为显示日志的任何位置的元素的父级。

or, don't wrap everything in one tag. 或者，不要将所有内容都包装在一个标签中。 ie. 即。 have separate header, content, footer, that normally have the same width and are centered, but when you click expand, the content.. expands 具有单独的页眉，内容，页脚，通常具有相同的宽度并居中，但是当您单击展开时，内容就会展开。