Question

我正在处理显示表的Web项目，它应该占据设备的整个宽度。我有两个静态的<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>

这是我用来在<td>和<div>中间制作自定义滚动视图的样式元素：

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

当前，当高度增加时，中间的<td>在顶部和底部创建空间。另外，我尝试将高度设置为calc(300px + 1vw)，但这样做会忽略高度并形成全宽。请提出实现方法的建议。

Answer 1

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

Fiddle

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

1 个答案: