Question

我想在三个div中创建3个元素......

<body>
    <div id="first" style="height:100px"></div> <!-- a bar with 100px -->
    <div style="height:100% - 100px"> <!-- (not working)-->
        <div id="second" style="height:50%"></div> <!-- not working-->
        <div id="third" style="height:50%"></div> <!-- not working-->
    </div> 
    <style>
        html, body{
            height: 100%; 
            margin:0 !important;
            padding:0 !important;
        }
    </style>
</body>

然而，它不起作用。我怎么能这样做？

Answer 1

第一个div是100px高度。下一个div是400px高度。第二个div是400px高度（200px）的50％，第三个div也是200px（400px的50％）。

＆＃13;

UTF-8

＆＃13;

Answer 2

如果您要查找相对宽度，请执行以下操作：

<强> HTML

<body>
  <div id="first"></div>
  <div id="wrapper">
    <!-- not working-->
    <div id="second">
      <p>
        Some Stuff here
        <br> Agains some stuff here.
      </p>
    </div>
    <!-- not working-->

    <div id="third">
      <p>
        Some Stuff here.
        <br> A whole lot of useful stuff here!
      </p>
    </div>
  </div>
</body>

<强> CSS

html,
body {
  height: 100%;
  margin: 0px;
}

#first {
  height: 100px;
  width: 100%;
}

div#wrapper {
  height: -webkit-calc(100% - 100px);
  height: -moz-calc(100% - 100px);
  height: -o-calc(100% - 100px);
  background-color: green;
}

#wrapper #second,
#wrapper #third {
  height: 50%;
  background-color: #aaa;
}

#wrapper * {
  margin: 2px;
}

查看fiddle。

如何设置第二个div的高度

2 个答案: