无法垂直和水平拉伸 css div 100 %答案

【问题标题】：Can not stretch the css divs 100 % vertically and horizontally无法垂直和水平拉伸 css div 100 %
【发布时间】：2012-06-14 08:49:03
【问题描述】：

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

什么不起作用：

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

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

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

我在 IE9 上测试过这个

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

【问题讨论】：

这可能有助于 1) stackoverflow.com/questions/4075440/dynamic-height-for-div
我很清楚，您希望紫色、黄色、黑色和橙色字段占据 100% 的窗口宽度？
紫色、黄色、黑色。橙色不是。我做了 height:auto 但是没有滚动条可见。因为 div 向下延伸到浏览器中。
对于'height-auto'，您需要设置一个'height-max'来设置滚动条何时弹出。这仍然对高度设置了限制，但是如果黑色字段中的文本很少，至少您不会得到很大的空白区域。另外，橙色区域与红色区域的关系应该在哪里？在左边还是在上面？
橙色 div 应该在左边。我应该在黑色div上设置height-max，但是我应该设置什么px，我不知道它的最大高度。

标签： html css layout stretch

【解决方案1】：

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

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

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

height: 200px;
overflow:hidden;

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

【讨论】：

不要使用javascript！为什么我应该将我的高度设置为 200px 以使水平空间工作？请再次阅读我的问题。

【解决方案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/

【讨论】：