无法沿垂直和水平方向拉伸css div 100％ [英] Can not stretch the css divs 100 % vertically and horizontally

问题描述

我试图将我的表格设计转换为css div设计。

I am trying to convert my table design to css div design.

无效：

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

1.) The black div will have list items therefore I need scrollbars which is shown at the moment. Thats fine. But I do not want to limit the height to 400px. My former design had 100% for the height so it takes all vertical space on the screen.

2。）红色div（rightContent）应该有一个固定宽度为200px ;当我设置这个我必须设置，即leftContent采取所有水平空间。

2.) The red div (rightContent) should have a fixed width of 200px; When I set this what do I have to set, that the leftContent takes all horizontal space.

在所有的旧表布局中没有外部垂直滚动条可见的整个布局。

Above all in the old table layout were no outer vertical scrollbar visible around the whole layout.

我在IE9上测试了这个项目

I tested this on IE9

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

推荐答案

如果我从头开始这样的事情，我会重新思考布局，所以我没有这么紧的约束，但因为你正在转换一个现有的网站，我明白这可能不是一个选项。

If I was starting something like this from scratch I'd rethink the layout so I didn't have such tight constraints, but as you're converting an existing site I appreciate this might not be an option.

您可以使用 display：table; ， display：table-row; / code>和 display：table-cell ;声明获得一个语义正确的（它不是表格数据，对吧？）结构，其行为就像滥用yore的< table> 不可否认，你必须为IE6和7（可能是2-3％的用户）实施一些工作，但也许你可以接受，它可用，但在这些浏览器不完美？

You could use the display: table;, display: table-row; and display: table-cell; declarations to get a semantically correct (it's not tabular data, right?) structure which behaves just like the oft misused <table> of yore. Admittedly, you'd have to implement some work-around for IE6&7 (probably 2-3% of users), but perhaps you could accept that it's usable but imperfect in those browsers?

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

这篇关于无法沿垂直和水平方向拉伸css div 100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！