Question

我想将子div高度设置为100％减去标题的高度（无滚动条）。有没有calc没有vh且没有绝对位置的解决方案？ https://jsfiddle.net/y66vz2n7/

<html style="height:100%">

<body style="height:100%;background-color:blue;margin:0">

    <div id="parent" style="height:100%; background-color:red;">

        <header style="height:40px;background-color:yellow;">header</header>

        <div id="child" style="height:100%; background-color:green;">child</div>

    </div>

</body>

</html>

Answer 1

您可以尝试这样做： Demo

* {
    box-sizing: border-box;
}
html, body {  
    height: 100%;
    background-color:blue;
    margin:0;
}
#child {   
    position: absolute;
    top: 40px;
    bottom: 0;
    left:0;
    right:0;
    overflow: auto;
    background-color:green;
}

HTML：

<div id="parent" style="height:100%; background-color:red;">
    <header style="height:40px;background-color:yellow;">header</header>
    <div id="child">child</div>
</div>

=============================================== =========================

更新： Demo2

=============================================== =========================

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#parent {
    display: table;
    height: 100%;
    width: 100%;  
    background-color:red;
}
header {
    display:table-row;
}
.content {
    display: table-row;
    background-color:green;
    width:100%;
    height: 100%;
    overflow: auto;
}

HTML：

<div id="parent">
    <header style="height:40px;background-color:yellow;">header</header>
    <div class="content">child</div>
</div>

Answer 2

这是没有Calc（）http://jsfiddle.net/7t0pt09w/

的解决方案

<table>
  <thead>
    <tr>
      <th rowspan="2">Operation conducted</th>
      <th colspan="3">Drug evidence seized</th>
    </tr>
    <tr>
      <th>Shabu</th>
      <th>Majijuana</th>
      <th>Others</th>
    </tr>
  </thead>

子div上的

将使div覆盖屏幕，并在顶部给出标题的高度

设置高度100％的子div减去固定高度

2 个答案: