怎么设table高度100%，第三个tr高度铺满剩余的屏幕高度

yzxlyl 2018-07-13 11:52:29

一个table有3行，第一个第二个tr有内容有高度，怎么让剩下的第三个tr（可能没多少内容）就固定为剩余的屏幕高度呢？

...全文

529 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

圈圈_叉叉 2018-07-14

打赏
举报

引用 2 楼 Logerlink 的回复:



<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			*{margin: 0;padding: 0;}

			table{border-collapse: collapse;}

			tr{border:1px solid red;}

		</style>

		<script>

			window.onload=function(){

				 let clientHeight = document.documentElement.clientHeight;

				 let trElList = document.querySelectorAll('tbody tr');

				 let decHeight = 0;

				 trElList.forEach((item,index)=>{

				 	if(index < 2){

				 		console.log(item.offsetHeight)

				 			decHeight+=item.offsetHeight

				 	}else{

				 		item.style.height=clientHeight - decHeight+'px';

				 	}

				 })

				 

			}

		</script>

	</head>

	<body>

		<table>

			<tbody>

				<tr height="300">

					<td>姓名</td>

				</tr>

				<tr height="100"> 

					<td>蓝</td>

				</tr>

				<tr>

					<td>黄</td>

				</tr>

			</tbody>

		</table>

	</body>

</html>

大哥我想问一个问题，现在开发中用ES6多么

我是小白现在用的还是旧版本的写法

Logerlink 2018-07-13

打赏
举报



<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			*{margin: 0;padding: 0;}

			table{border-collapse: collapse;}

			tr{border:1px solid red;}

		</style>

		<script>

			window.onload=function(){

				 let clientHeight = document.documentElement.clientHeight;

				 let trElList = document.querySelectorAll('tbody tr');

				 let decHeight = 0;

				 trElList.forEach((item,index)=>{

				 	if(index < 2){

				 		console.log(item.offsetHeight)

				 			decHeight+=item.offsetHeight

				 	}else{

				 		item.style.height=clientHeight - decHeight+'px';

				 	}

				 })

				 

			}

		</script>

	</head>

	<body>

		<table>

			<tbody>

				<tr height="300">

					<td>姓名</td>

				</tr>

				<tr height="100"> 

					<td>蓝</td>

				</tr>

				<tr>

					<td>黄</td>

				</tr>

			</tbody>

		</table>

	</body>

</html>