-2

So I am trying to make four columns with the same height. There should be some padding and visually they should look with the same height.

Experimenting different solutions I've found something strange happening when one of the div's has "height: 1;". Since this isn't valid css, to my knowledge, the default value of 'auto' should be given to the div. But it doesn't display the same with value 'auto'.

Since I didn't get "height: 1" to work in jsFiddle, here is JsBin link: JsBin.

I've come here to get information on two things:

  1. Why does "height:1;" make it work on Chrome and IE latest versions. What is happening?

  2. What would be a possible valid html/css solution to get a result like this: What I am after

If somehow I could get the inner div inside the "display: table-cell" to be with height: 100% then the problem would probably be solved.

4

1 回答 1

1

它之所以有效，是因为该页面没有<!DOCTYPE html>. Chrome 和 IE 正在进入 quirks 模式，有效的 CSS（for ）在height:1 哪里height:1px，这以某种方式修复了 quirks 模式下的布局。

解决方案：添加<!DOCTYPE html>到文件的开头，然后从那里开始。

于 2013-09-21T15:33:35.710 回答