CSS/HTML:如何使下面的table高度占满整个页面呢?
</table>
<table border="1" width=100% ><!-- 下半 -->
</table>
我需要上半部分的高度固定，也就是不随浏览器伸缩变动，所以我固定了高度为70px，但是下面的高度我得给多少才能使下半部分的table撑满整个屏幕呢？默认是撑不满的，但是如果给个height=100%就又超出一个屏幕的高度了，求解 展开
1、首先需要打开sublimeText编辑器。
2、然后需要按照图示代码编写一个html页面，并且放入一张背景。
3、效果显示如下图，图片还是原来大小的背景。
4、然后需要按照图示代码利用css属性background-size: cover;把整个背景填充。
5、效果显示如下图，图片table高度把屏幕占满。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。
2、在index.html中的<body>标签中，输入html代码：$('#b').height($(document).height() - $('#a').height());。
3、浏览器运行index.html页面，此时下面的表格撑满了整个页面。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;}
</style>
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
用这个代码
<style type="text/css">
html{height:100%;}
body{margin:0; padding:0; border:0;font-family:Microsoft YaHei,'微软雅黑'; font-size:12px; background:#FFF;height:100%;}
table{border-collapse: collapse;}
tr,td{padding:0;margin:0;border:0;}
</style>
<body>
<table style="width:100%;border:0;margin:0;padding:0;height:100%;">
<input type="hidden" value="{{.agent}}" id="agent"/>
{{template "admin/top.html"}}
<tr height="100%">
<td valign="top" height="100%" style="width:100%;">
<div style="width:100%;height:100%;">
<table style="width:100%;border:0;font-size:13px;height:100%;">
<tr>
<td id="left" valign="top" style="width:15%;border-right:solid #31b700 1px;"></td>
<td valign="top" style="width:84%;"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
|
广告 您可能关注的内容 |
