HTML 表格无法按我想要的方式工作

Question

我正在处理显示表格的网络元素，它应该占据设备的整个宽度。我有两个静态 <td>中间是滚动的<div>如图image here我想将此屏幕安装在任何高度的设备上。我这里使用的表格代码如下:

<table class="time navbar-fixed-top" style="width:100%; height:100%">
<tr>
<td style="padding-top:calc(15px + 1vw); padding-bottom:calc(15px + 1vw);     
height:10%;">
<b style="padding-left:5%;font-size:calc(15px + 1vw);">Time: <span         
id="timer"></span></b></td>

<td style="height:10%;">
<div class="dropdown" style="float:right; padding-right:5%;">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1"     
data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>     
&nbsp;&nbsp;Hi, Student
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><span 
class="glyphicon glyphicon-off"></span> Logout</a></li>
</ul>
</div>
</td>
</tr>

<tr>
<td data-spy="scroll" colspan="2" style="background:white; color:black; 
height:80%;">
    <div class="container" id="collapse1">
        <h4><p class="text-center">Instructions to candidates</p></h4>
        <hr/>
        <p>1. The test contains total 30 questions on combinely Physics, 
Chemistry and Mathematics subjects.</p>
        <p>2. Each subject has 10 questions. Each question carries 4 marks. 
</p>
        <p>3. There will be negative marking. -1 mark will deducted for 
every wrong question.</p>
        <p>4. The time allocated for this test is 60 minutes which is 
displayed on top left corner.</p>
        <p>5. The countdown will start once you click on the "Start Test" 
button below.</p>
        <p>6. The test will be auto submitted once the timer runs up or you 
can manually submit the test using "Submit Test" button.</p>
        <p>7. Do not logout or close the app during test as it may vanish 
your progress and you have to take the test again from starting.</p>
        <p>8. The result will be displayed along with the answers and 
explanations after submission of test.</p>
        <p>9. click on the checkbox below as you can take test only after 
checking it.</p>
        <p><input type="checkbox"><b> I agree to the above instructions and 
will follow them.</b></p>
    </div>
</td>
</tr>

<tr>
<td colspan="2" style="height:10%;"><button class="button" id="mybut" 
onclick="myFunction()" style="font-size: calc(12px + 1vw);">START 
QUIZ</button></td>
</tr>
</table>

这是我用来在中间制作自定义 ScrollView 的样式元素 <td>和 <div> :

#collapse1{
    overflow-y:scroll;
    height: 200px;
    }

目前，当高度展开时，中间<td>在顶部和底部创造空间。另外，我尝试将高度设置为 calc(300px + 1vw) ，但这样做会忽略高度并使全宽。请建议如何实现这一目标。

Answer 1

添加 html{height: 100%;} 可以解决您的问题。

Fiddle