我想要实现的是以下所有三个
- 将页脚推到页面底部
- 还使主 div 始终与子 div 保持全尺寸
- 所有子 div 的高度都保持不变
我尝试了很多方法来做到这一点，我找到了一种方法。但是我所做的与 Firefox、Safari 和 IE7 及以下版本不兼容，请帮助我，我正在寻找适用于所有浏览器和纯 CSS 的东西。
非常感谢朋友。
html:
<body>
<div id="parent">
<div id="row">
<div id="childRight">content</div>
<div id="childLeft"></div>
</div>
</div>
<div id="footer">footer content</div>
CSS：
<style>
#parent{
height: auto !important;
min-height: 100%;
width: 400px;
background: grey;
overflow: auto;
display: table;
}
#footer{
height: 60px;
width: 400px;
background: yellow;
margin-top: -60px;
}
html, body{
height: 100%;
margin: 0;
}
#childRight, #childLeft{
display: table-cell;
width: 100px;
border: 1px solid black;
min-height: 100%;
}
#childRight{
background: green;
height: 100px;
}
#childLeft{
background: red;
height: 200px;
}
#row{
display: table-row;
background: blue;
}
</style>
JSfiddle 示例：http: //jsfiddle.net/yellowandred/UBUNJ/2/
感谢各位朋友的帮助和建议。提前致谢..
