我有一个容器div,它有两个内部div; 两者都应在容器内取100%宽度和100%高度.
我将两个内部div设置为100%高度.这在Firefox中运行良好,但在IE中,div不会伸展到100%高度,而只会伸展到其中文本的高度.
以下是我的样式表的简化版本.
#container
{
height: auto;
width: 100%;
}
#container #mainContentsWrapper
{
float: left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
#container #sidebarWrapper
{
float: right;
height: 100%;
width: 29.7%;
margin: 0;
padding: 0;
}
有什么我做错了吗？或者我错过了任何Firefox/IE怪癖？
我的目标是创建一个占据窗口高度100%的容器,并且在其中,其图像也是窗口高度的100%.但是,我还想在容器上设置最小高度,这样东西就不会太小.
例如:
<html>
<body style="height: 100%;">
<div style="height: 100%; min-height: 500px;">
<img src="cool.jpg" style="height: 100%"/>
</div>
</body>
</body>
(我发誓我的网页比这还凉爽)
好的,一切都很好.直到我们缩小窗口才能min-height开始.在那一点上,div停止收缩,正如预期的那样,但img随着窗口继续收缩.
有什么想法吗？
一个纯粹的CSS实现是理想的,但如果需要,我对JS开放.