Why can't the table height be fixed? _html/css_WEB-ITnose-HTML Tutorial-php.cn

I set the

table height to 100%, and then divided the table into three rows. I want these three rows to equally divide the height, each with 33%. However, if the data in the table exceeds this height, the table will It will change. I want it to be fixed, and the maximum cannot exceed 33%
CSS can achieve the effect in firefox, but not in 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;}

Copy after login

Reply to discussion (solution)

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>

Copy after login

This is a dynamically generated data table

with more or less content

The main thing is this paragraph:

/* 主布局框架,三行一列 */.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%;}

Copy after login

<!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>

Copy after login

This can be set, but if there are two layers of DIVs nested inside, it won’t work. The data is written in the innermost DIV.

-->Writing here can be divided equally
left

The final result is as follows:
div.s1 is on the left, div.s2 is on the right, and div.t is inside s2. The table divides the web page into three equal parts. The rows of data in t are variable, and there will be a scroll bar if the height exceeds the height

-------------------

| s1 | |
| |--- - s2 ----|
| | | t |
-------------------
| s1 | -- s2 ----|
| | | t |
-------------------
| s1 | --- s2 ----|
| | | t |
-------------------

You can use this code as Example:

I've done it, just replace the table with a div....

Related labels：

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

source：php.cn

Previous article：In this case, as long as you enter content in the text box, it will be automatically submitted to ajax. How can you click the submit button to submit? _html/css_WEB-ITnose Next article：How to add content to an element in javascript_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn