css - 左 div 滚动和右 div 拉伸(stretch)布局高度/跨浏览器兼容?

标签 css cross-browser height html

我想知道是否有可能让这样的布局跨浏览器兼容。我想在容器 div 中并排放置两个 div。右侧div的内容应该拉伸(stretch)整个布局的高度,或者说拉伸(stretch)容器div的高度。

在左边的 div 中,我想要一个固定高度的页眉和页脚 div。在这两个 div 之间,我想要一个可滚动的内容 div。此 div 应随着右侧 div 内容的增长而拉伸(stretch)。

我在谷歌浏览器中使用了这个:http://cssdesk.com/PFNuX

但是,它在IE和FF中不起作用。

我尝试了各种解决方案,包括 float div、表格、显示为表格的 div 等等,但我的解决方案都没有正常工作。只有上述解决方案有效,并且仅适用于 Chrome(我还没有尝试过 Opera 和 Safari)。

我的猜测是,通过使用一些 jQuery 或一些 JavaScript,我可以让它在所有浏览器中工作,但我还没有尝试过。我更喜欢在所有现代浏览器中仅使用 CSS 而没有 JS 的解决方案。

最佳答案

您必须使用 Javascript 来调整 <div> 的大小以适应内容。

关于css - 左 div 滚动和右 div 拉伸(stretch)布局高度/跨浏览器兼容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17492241/

相关文章:

html - 没有 CSS 表达式的可移动侧边栏布局可能吗?

css - Youtube 视频作为特定部分的背景

html - 如何垂直对齐填充表格单元格的图像和输入类型 ="text"?

css - Internet Explorer 不支持我的最小高度 : 100% with flexbox

html - 如何根据文本内容使所有 div 高度相同?

html - 带图像的 CSS 100% 高度列

CSS Grid : grid-column with span, calc() 和 CSS 变量在 WebKit 浏览器中不起作用

html - 图像 slider 显示在移动导航栏上方的问题

javascript - WordPress 模板在 IE7 上导致白色/空白屏幕,其后面带有源代码和导航

javascript - 如何在浏览器中选择所有 *renderable* 文本元素