Question

我正在尝试将子元素的高度设置为其父元素的百分比。这是我的设置：

    .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，但之前从未尝试过为许多浏览器开发。我将不胜感激任何帮助。

Answer 1

你确定它在FF中不起作用吗？在这里小提琴：http://jsfiddle.net/mZ3Vp/1/在我的机器上工作正常。如果它对您不起作用，您能否指定您使用的操作系统以及您使用的FF版本？

Answer 2

人们会期望iwant-event类能够填补100％的中心位置。

究竟发生了什么？您是否希望iwant-event水平和垂直填充容器？就我所见，它确实垂直填充它。水平它不会，因为你有规则：

.iwant-event { 
  width: 84.5%;
}

您需要将其更改为...

.iwant-event { 
  width: 100%;
}

...用于完全水平填充。当然，您在center上也有3px的填充，因此您需要将其移除以使iwant-event完全填充center。

CSS中孩子的百分比高度

2 个答案: