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： 如果你想将高度设置为红色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/

无法纵向和横向拉伸css div 100％

2 个答案: