格填充母和中心兒童

有了一個非常簡單的標記，我需要：格填充母和中心兒童

延伸div來填補它的父高度
中心該元素垂直

的孩子所以#wrapper必須採取一切可能的高度，推腳到#container的底部。內部的div必須保持一致，所以只有他們的位置會改變。（基本上只有元素的位置會發展，而不是它們的大小）。

另外我需要與ie8兼容（所以沒有flexbox悲傷）。

存在的唯一固定大小是#container之一。

下面是摘錄：

/* position */ 
 
/* any idea ? */ 
 

 
/* fixed size */ 
 
#container { height: 300px; } 
 

 
/* display purpose */ 
 
* { 
 
    border: 1px black solid; 
 
    margin: 2px; 
 
    color: #fff; 
 
} 
 
#container { background-color: #999; } 
 
#header, #wrapper { background-color: #666; } 
 
#footer, #list { background-color: #444; } 
 
#list div { background-color: #222; }

<div id="container"> 
 
    <div id="header">header</div> 
 
    <div id="wrapper"> 
 
    <div id="list"> 
 
     <div>div</div> 
 
     <div>div</div> 
 
     <div>div</div> 
 
    </div> 
 
    <div id="footer">footer</div> 
 
    </div> 
 
</div>

我看了看錶顯示，絕對定位，:before破解，但沒有得到這個權利...

這裏是一個codepen使用相同的代碼：http://codepen.io/anon/pen/NPPVZX

結果應該如下所示： http://codepen.io/anon/pen/OPPeOv

（但與列表中的更多/更少的div和不同頁腳/報頭大小的可能性）

預先感謝。

來源

2014-11-23 nobe4

/* position */ 
#wrapper, #list, #list div { flex-grow: 1; } 

/* fixed size */ 
#container { height: 300px; } 

/* display purpose */ 
div{ 
    border : 1px black solid; 
    margin: 2px; 
    color: #fff; 
    display: flex; 
    flex-direction: column; 
} 

#container  { background-color : #999; } 
#header, #wrapper { background-color : #666; } 
#footer, #list { background-color : #444; } 
#list div   { background-color : #222; }

分叉http://codepen.io/Logo/pen/KwwjWr

不知道這是否是你想要的。

編輯對不起。

/* position */ 
#wrapper { height: 91%; } 
#list { height: 90%; } 
#list div { margin-bottom: 9.9%; }

這裏使用的百分比，這我不知道IE8是否支持或沒有，這就是你的意思是「div的內部必須保持他們的身邊」，所以我想你想的高度是不變的#list div s。

如果不是你的情況，然後用

#list div { height: 31.5%; }

EDT 2 這是另一種嘗試去。

嘗試1

/* position */ 
#container *, #wrapper * { max-height: 90.5%; } 
#list { padding:9.6% 0; }

這不是一個完全自動化的嘗試，這樣，你必須改變填充或情況高度它們不同。

嘗試2：使用許多表。

簡答案here，但由於我添加了太多東西，比如重新佈置佈局（爲嵌套表添加一層div）以及很多display:table s，佈局有點破裂（因此邊距不均勻）。這是我能做的最多的事情。

來源

2014-11-23 03:39:44 Logo

不是真的，我還不夠清楚，我更新了我的問題。雖然謝謝！ – nobe4 2014-11-23 03:59:14

已更新。這是你現在想要的嗎？ – Logo 2014-11-23 04:27:53

在這種情況下，我恐怕不能再幫你了。只有3種方法可以做到這一點，1是每次手動計算寬度，2是使用Javascript來自動化進程，3是停止對ie8s進行黑客攻擊。 – Logo 2014-11-23 06:06:53

多一點標記的回答，感謝@logo，這裏是理想的效果codepen：http://codepen.io/anon/pen/jEPNby

/* position */ 

#header { display:table-header-group; } 
#footer { display:table-footer-group; } 
#wrapper2 { height:100%; } 
#wrapper, #list { display:table-cell; } 
#container, #wrapper2 { display:table; width: 100%;} 
#list { vertical-align: middle; }

再次感謝！

來源

2014-11-23 17:36:20 nobe4

格填充母和中心兒童

回答

相關問題