CSSHTML:如何使下面的table高度占满整个页面呢?

html-css021

CSSHTML:如何使下面的table高度占满整个页面呢?,第1张

1、首先需要打开sublimeText编辑器。

2、然后需要按照图示代码编写一个html页面,并且放入一张背景。

3、效果显示如下图,图片还是原来大小的背景。

4、然后需要按照图示代码利用css属性background-size: cover把整个背景填充。

5、效果显示如下图,图片table高度把屏幕占满。

表格固定高度在css中使用height属性设置就是了。示例如下:

html代码:

<table class="table">

    <tr>

        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

    </tr>

</table>

CSS代码:

.table{width:400pxheight:400px}

.table td{border:1px solid #ccctext-align:center}

这里表格的高度就被定义成了400px。

我刚才测试了一下,能够正常使用tab。

但是你应该在css里面加上

#contents_2,#contents_3

之外。

我不清楚你有没有声明DOCTYPE.

顺便说一下啊,jqueryui.com提供tabs.js插件,能够符合你百分之九十九的需求,你可以看一下。

以下是我的测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<script type="text/javascript" src="jquery1-5.1.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// When a link is clicked

$("a.tab").click(function () {

// switch all tabs off

$(".hover").removeClass("hover")

// switch this tab on

$(this).addClass("hover")

// slide all content up

$(".contents_0").slideUp()

// slide this content up

var content_show = $(this).attr("title")

$("#"+content_show).slideDown()

})

})

</script>

<style type="text/css">

.menubox_0

.menubox

.menubox ul

.menubox li

.menubox li a

.menubox li a.hover

#contents_2,#contents_3

</style>

</head>

<body>

<div class="menubox_0">

<div class="menubox">

<ul>

<li><a href="#" class="tab hover" title="contents_1">Specifications</a></li>

<li><a href="#" class="tab" title="contents_2">System Requirement </a></li>

<li><a href="#" class="tab" title="contents_3">Images</a></li>

</ul>

</div>

<div id="contents_1" class="contents_0">

<p>1This DRM Converter is capable of converting audio and video file ... </p>

</div>

<div id="contents_2" class="contents_0">

<p>2This DRM Converter is capable of converting audio and video file ... </p>

</div>

<div id="contents_3" class="contents_0">

<p>3This DRM Converter is capable of converting audio and video file ... </p>

</div>

</div>

</body>

</html>