我正在尝试将子元素的高度设置为其父元素的百分比。 这是我的设置:
.html, .body {height: 100%; width: 100%}
/* test is a child of body to ensure content is aligned in the middle */
.test {
width: 90%;
height: 100%;
position: absolute;
left: 5%;
top: 0%;
margin: -0% 0 0 0%;
}
/* top banner */
.banner {
height: 100px;
margin-left: 2%;
width: 96%;
}
/* rest of the content */
.center{
background-color: #FFFFFF;
height: 80%;
margin-left: 2%;
margin-top: 10px;
overflow-x: auto;
padding: 3px;
position: relative;
width: 95%;
}
/* content inside center */
.iwant-event {
height: 100%;
left: 0;
width: 84.5%;
}
人们会期望 iwant-event 类填充 100% 的中心。在 chrome 中，我得到了这种行为。但是，在 Firefox 中，iwant-event 不会 100% 填充中心。我的 HTML 的简化版本是:
<body>
<div class="test">
<div class="banner">Banner stuff here</div>
<div class="center">
<div class="iwant-event"></div>
</div>
</div>
</body>
我相当熟悉基本的 CSS，但之前从未尝试过为多种浏览器开发。我将不胜感激任何帮助。
最佳答案
你确定它在 FF 中不起作用吗？在这里 fiddle :http://jsfiddle.net/mZ3Vp/1/在我的机器上工作正常。如果它对您不起作用，您能否指定您使用的操作系统以及您使用的 FF 版本？
关于css - CSS中 child 的高度百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9857329/