html - 无法垂直和水平拉伸 css div 100 %

Question

我正在尝试将我的表格设计转换为 css div 设计。

什么不起作用：

1.）黑色 div 将有列表项，因此我需要目前显示的滚动条。没关系。但我不想将高度限制为 400px。我以前的设计有 100% 的高度，所以它占据了屏幕上的所有垂直空间。

2.) 红色的 div (rightContent) 应该有 200px 的固定宽度；当我设置这个时，我必须设置什么，leftContent 占据所有水平空间。

最重要的是，在旧表格布局中，整个布局周围没有可见的外部垂直滚动条。

我在IE9上测试过

http://jsfiddle.net/pEMwP/4/

Answer 1

对于问题1： 如果你想要一个滚动条，你不应该将height属性设置为auto。相反，您可以像这样通过 Javascript 动态设置 Div 高度。

document.getElementById("ListData").style.height=<your Size>;

对于问题 2： 如果要将高度设置为 Red Div。你可以这样指定。

height: 200px;
overflow:hidden;

这会将 div 限制为 200px。现在你可以增加你的其他 div/divs 宽度来占据这个空间。

Answer 2

如果我从头开始这样的事情，我会重新考虑布局，这样我就没有这么严格的限制，但是当您转换现有网站时，我很感激这可能不是一个选择。

您可以使用display: table;,display: table-row;和display: table-cell; 声明以获得语义正确的（它不是表格数据，对吗？）结构，其行为就像过去经常被滥用一样<table>。诚然，您必须为 IE6 和 7（可能是 2-3% 的用户）实施一些变通方案，但也许您可以接受它在那些浏览器中可用但不完美的事实？

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/