如何在不使用寬​​度和高度屬性的情況下制作完整的div？

Question

我有一個代碼

<div class="outer">
 <div class="inner">A</div>
</div>

我的外部對窗口大小有響應，即寬度= 100％，高度= 100％。

我需要的是將“內部”作為100％的高度和寬度，但不使用內部的寬度和高度屬性？

i.e inner{height: 100%; width : 100%}

即使我不想使用js？

Answer 1

.outer{
position:relative;
}

.inner{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}

在這里演示

Answer 2

這是解決方案：

使用position屬性。

http://jsfiddle.net/9HTSA/

Answer 3

在外部div設置display:table;

在內部div設置display: table-cell

小提琴

Answer 4

我們可以做position屬性

.outer{
position:relative;
}

鏈接： http ： //www.w3schools.com/css/css_positioning.asp了解這一點

Answer 5

你可以嘗試下面的代碼：

<div class="outer" style="width:100%;height:100%">
  <div class="inner" style="display: block;height: inherit;">A</div>
</div>

Answer 6

訪問此網址：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

它使用float元素作為輸出。