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

我有一个固定宽度的站点，在我显示日志查看器的内容区域内

日志查看器很难读取，因为它受到站点固定宽度的限制，并且日志行很长

我想做的是在日志查看器上面有一个按钮，上面写着“展开”，当单击时，日志查看器的宽度将增长到略小于视口的大小

站点的其余部分仍然保持固定宽度，但日志查看器的宽度与屏幕一样宽

我在这里画了一幅我想要实现的图像：

我尝试过设置“位置：绝对；左：20px”（以及设置宽度），但这会导致我的站点的页脚向上移动到日志查看器下方（因为日志查看器不再增加内容区域的高度）

我不知道该怎么办，我相信这一切都应该与css有关

---

任何帮助都将不胜感激

如果不介意为内容区域设置高度，请将其设置为显示日志的位置的元素的父级

或者，不要将所有内容都包装在一个标签中。也就是说，有单独的页眉、内容和页脚，这些页眉、内容和页脚通常具有相同的宽度并居中，但当您单击“展开”时，内容。。展开

尝试以下操作：

编辑：对不起，这对不同的宽度不起作用。以下是一个有效的方法：