表格高度为什么不能固定大小？_html/css

我将

表格高度设为100%,然后在表格里面分了三行，想让这三行平分高度，各33%，但是如果表格里面的数据超过了这个高度，表格就会随着变化。我是想让它固定下来，最大不能超过33%
CSS是在firefox里面可以达到效果，但在IE8里面却不行
CSS:

/* 页面设置 */html,body,form{	width:100%;	height:100%;	max-height:100%;}/* 主布局框架,三行一列 */.tbparent{	width:100%;	height:95%;	max-height:100%;	border:1px solid;}tbody{    height:100%;    min-height:100%;    max-height:100%;}/* 三行均分height *//*.tbparent tr{	height:3%;	width:100%;	max-height:3%;}*/.tbparent td{	width:100%;	height:33%;	min-height:33%;	max-height:33%;}/* 线别信息,主框架 */.father{	width:100%;	height:100%;	max-height:100%;	border:1px solid;	margin-bottom:0px;}/* 线别信息,标题 */.son1{	width:13%;	height:100%;	max-height:100%;	background-color:Green;	color:yellow;	text-align:left;	border:1px solid;	float:left;	line-height:35px;}/* 线别信息,制程/料号 */.son2{	width:21%;	height:100%;	max-height:100%;	border:1px solid;	padding-left:5px;	float:left;	font-family:Microsoft JhengHei;	font-size:16px;}/* 料号列表 */.partlist{	width:100%;	height:100%;	max-height:73%;	overflow:auto;	border-top:1px;	border-top-style:dashed;	text-align:left;	padding-left:5px;	margin-top:3px;	line-height:3px;}.partlist table{	width:auto;	height:auto;	max-height:100%;	overflow:scroll;}

Copier après la connexion

。

回复讨论(解决方案)

html：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="losepart.aspx.cs" Inherits="LosePart_losepart" %><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>发料单</title>    <link href="losepart.css" type="text/css" rel="stylesheet" />    <script type="text/javascript" src="losepart.js"></script></head><body>    <form id="form1" runat="server">        <div>        <table class="tbparent">            <tr>                <td>                    <div class="father" style="width: 100%" >                        <div class="son1" >                            <span> <b>线别:</b>                            <select id="linename_1" onchange="get_lose_info('1')" style="width: 78px">                             </select>                            </span>                            <span id="lineinfo_1"></span>                        </div>                        <div class="son2">                             <span><b>制程:</b><select id="procname_1" onchange="get_lose_info_id('1','1')" style="width: 95px">                                  </select>                                <input id="part_info_index_1" type="hidden" style="width: 13px" /></span><br />                            <span><b> 料号:</b><input id="partno_1" type="text" onkeypress="send_part(event,1)" style="width: 107px" />                            </span>                            <div id="partlist_1" class="partlist" >                                               </div>                        </div>                        <div class="son2">                             <span><b>制程:</b><select id="procname_2" onchange="get_lose_info_id('1','2')" style="width: 95px"></select>                                <input id="part_info_index_2" type="hidden" style="width: 13px" /></span><br />                            <span><b> 料号:</b><input id="partno_2" type="text" onkeypress="send_part(event,2)" style="width: 107px" />                            </span>                            <div id="partlist_2" class="partlist">                            </div>                        </div>                        <div class="son2">                             <span><b>制程:</b><select id="procname_3" onchange="get_lose_info_id('1','3')" style="width: 95px"></select>                                <input id="part_info_index_3" type="hidden" style="width: 13px" /></span><br />                            <span><b> 料号:</b><input id="partno_3" type="text" onkeypress="send_part(event,3)" style="width: 107px" />                            </span>                            <div id="partlist_3" class="partlist">                            </div>                        </div>                         <div class="son2">                             <span><b>制程:</b><select id="procname_4" onchange="get_lose_info_id('1','4')" style="width: 95px"></select>                                <input id="part_info_index_4" type="hidden" style="width: 13px" /></span><br />                            <span><b> 料号:</b><input id="partno_4" type="text" onkeypress="send_part(event,4)" style="width: 107px" />                            </span>                            <div id="partlist_4" class="partlist">                            </div>                        </div>                    </div>                </td>            </tr>            <tr>                <td ><div class="father"  >                    <div class="son1" >                        <span> <b>线别:</b>                            <select id="linename_2" onchange="get_lose_info('2')" style="width: 78px">                            </select>                        </span><span id="lineinfo_2"></span>                    </div>                    <div class="son2">                         <span><b>制程:</b><select id="procname_5" onchange="get_lose_info_id('2','5')" style="width: 95px"></select>                            <input id="part_info_index_5" type="hidden" style="width: 13px" /></span><br />                        <span><b> 料号:</b><input id="partno_5" type="text" onkeypress="send_part(event,5)" style="width: 107px" />                        </span>                        <div id="partlist_5" class="partlist">                        </div>                    </div>                    <div class="son2">                         <span><b>制程:</b><select id="procname_6" onchange="get_lose_info_id('2','6')" style="width: 95px"></select>                            <input id="part_info_index_6" type="hidden" style="width: 13px" /></span><br />                        <span><b> 料号:</b><input id="partno_6" type="text" onkeypress="send_part(event,6)" style="width: 107px" />                        </span>                        <div id="partlist_6" class="partlist">                        </div>                    </div>                    <div class="son2">                         <span><b>制程:</b><select id="procname_7" onchange="get_lose_info_id('2','7')" style="width: 95px"></select>                            <input id="part_info_index_7" type="hidden" style="width: 13px" /></span><br />                        <span><b> 料号:</b><input id="partno_7" type="text" onkeypress="send_part(event,7)" style="width: 107px" />                        </span>                        <div id="partlist_7" class="partlist">                        </div>                    </div>                    <div class="son2">                         <span><b>制程:</b><select id="procname_8" onchange="get_lose_info_id('2','8')" style="width: 95px"></select>                            <input id="part_info_index_8" type="hidden" style="width: 13px" /></span><br />                        <span><b> 料号:</b><input id="partno_8" type="text" onkeypress="send_part(event,8)" style="width: 107px" />                        </span>                        <div id="partlist_8" class="partlist">                        </div>                    </div>                </div>                </td>            </tr>            <tr>                <td ><div class="father" >                    <div class="son1" >                        <span> <b>线别:</b>                            <select id="linename_3" onchange="get_lose_info('3')" style="width: 78px">                            </select>                        </span><span id="lineinfo_3"></span>                    </div>                    <div class="son2">                         <span><b>制程:</b><select id="procname_9" onchange="get_lose_info_id('3','9')" style="width: 95px"></select>                            <input id="part_info_index_9" type="hidden" style="width: 13px" /></span><br />                        <span><b> 料号:</b><input id="partno_9" type="text" onkeypress="send_part(event,9)" style="width: 107px" />                        </span>                        <div id="partlist_9" class="partlist">                        </div>                    </div>                    <div class="son2">                         <span><b>制程:</b><select id="procname_10" onchange="get_lose_info_id('3','10')" style="width: 95px"></select>                            <input id="part_info_index_10" type="hidden" style="width: 13px" /></span><br />                        <span><b> 料号:</b><input id="partno_10" type="text" onkeypress="send_part(event,10)" style="width: 107px" />                        </span>                        <div id="partlist_10" class="partlist">                        </div>                    </div>                    <div class="son2">                         <span><b>制程:</b><select id="procname_11" onchange="get_lose_info_id('3','11')" style="width: 95px"></select>                            <input id="part_info_index_11" type="hidden" style="width: 13px" /></span><br />                        <span><b> 料号:</b><input id="partno_11" type="text" onkeypress="send_part(event,11)" style="width: 107px" />                        </span>                        <div id="partlist_11" class="partlist">                        </div>                    </div>                    <div class="son2">                         <span><b>制程:</b><select id="procname_12" onchange="get_lose_info_id('3','12')" style="width: 95px"></select>                            <input id="part_info_index_12" type="hidden" style="width: 13px" /></span><br />                        <span><b> 料号:</b><input id="partno_12" type="text" onkeypress="send_part(event,12)" style="width: 107px" />                        </span>                        <div id="partlist_12" class="partlist">                        </div>                    </div>                </div>                </td>            </tr>        </table>        </div>    </form>   </body></html>

Copier après la connexion

这个里面是动态产生的一个数据表

,内容有多有少

主要就是这一段：

/* 主布局框架,三行一列 */.tbparent{	width:100%;	height:95%;	max-height:100%;	border:1px solid;}tbody{    height:100%;    min-height:100%;    max-height:100%;}/* 三行均分height *//*.tbparent tr{	height:3%;	width:100%;	max-height:3%;}*/.tbparent td{	width:100%;	height:33%;	min-height:33%;	max-height:33%;}

Copier après la connexion

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/* 主布局框架,三行一列 */.tbparent{    width:100%;    height:90px;    max-height:100%;    border:1px solid;} tbody{    height:100%;    min-height:100%;    max-height:100%;} /* 三行均分height */.tbparent tr{        width:100%;    max-height:33px;	height:30px;background-color:#ddd;	display:inline-block;} .tbparent td{	float:left;	display:block;    width:33%;    height:inherit;	overflow:hidden;}</style></head><body><table class="tbparent">	<tbody>	<tr>		<td>用ie7测试正常但ie8第一个会扩大怎么解决</td>		<td>W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站</td>		<td>		fffffffffffff		</td>			</tr>	<tr>		<td>用ie7测试正常但ie8第一个会扩大怎么解决</td>		<td>W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站</td>		<td>		fffffffffffff		</td>		</tr>	<tr>		<td>用ie7测试正常但ie8第一个会扩大怎么解决</td>		<td>W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风</td>		<td>		fffffffffffff		</td>		</tr>	</tbody></table></body></html>

Copier après la connexion

这样是可以设置，但是如果在里面嵌套了两层DIV，就不行了。数据是写在最内层的DIV里面的。

-->写这里是可以平分

-->float:left

-->但数据在这里写的,要怎么设置？

最终的结果如下：
div.s1在左边，div.s2在右边，div.t在s2里面。table将网页平分三份。t里面的数据行不定，超出高度会有滚动条
-------------------
| s1 | |
| |---- s2 ----|
| | t |
-------------------
| s1 | |
| |---- s2 ----|
| | t |
-------------------
| s1 | |
| |---- s2 ----|
| | t |
-------------------

可以以这段代码为例:

<html><head><style type="text/css">.tbparent{ width:100%; height:100%; max-height:100%;}.tbparent td{ border:1px solid blue; height:33%; max-height:33%; min-height:33%;}div.f{  height:100%;  max-height:100%  border:1px solid;}div.s1{  width:10%;  height:100%;  max-height:100%;  float:left;  border:1px solid;}div.s2{  width:70%;  height:100%;  max-height:100%;  float:left;  border:1px solid;}div.list{  height:90%;  max-height:90%;  overflow:auto;  border:1px solid;}</style></head><body><table class="tbparent"><tr><td><div class="f"><div class="s1">111</div><div class="s2"><span class="t">test</span><div class="list"><table><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr></table></div></div><div style="clear:both;"></div></div></td></tr><tr><td><div class="f"><div class="s1">111</div><div class="s2"><span class="t">test</span><div class="list"><table><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr></table></div></div></div></td></tr><tr><td><div class="f"><div class="s1">111</div><div class="s2"><span class="t">test</span><div class="list"><table><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr><tr><td>Firstname</td></tr></table></div></div></div></td></tr></table></body></html>

Copier après la connexion

我弄好了，把table换成div就可以了....

Étiquettes associées：

表格高度为什么不能固定大小？

Article précédent：这样子的情况下，只要在文本框输入内容，就会自动提交到ajax，怎么才能点击提交按钮才提交呢。_html/css_WEB-ITnose Article suivant：javascript如何向一个元素添加内容_html/css_WEB-ITnose

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur