Html DIV 在表格单元格中拉伸到高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/589754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DIV stretch to height 100% in a table cell
提问by Billy
I have following layout:
我有以下布局：
4 rounded corners background and two panels (left panel and right panel) inside it.
4 个圆角背景和其中的两个面板（左面板和右面板）。
Currently I implement the layout as follows:
目前我实现的布局如下：
Table with 9 cells:
包含 9 个单元格的表格：
top left corner | | top right corner
|left div right div|
bottom left corner | | bottom right corner
Code:
代码：
<!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">
<body>
<table id="content" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="corner1.jpg" /></td>
<td>
</td>
<td>
<img src="corner2.jpg" /></td>
</tr>
<tr>
<td>
</td>
<td valign="top" height="100%">
<div id="menu" style="float: left; width: 235px; height: 445px; background-color: #660000">
Menu
</div>
<div id="mainContent" style="float: left; margin-left: 10px; height: 100%; background-color: #888888">
Main Content
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="corner3.jpg" /></td>
<td>
</td>
<td>
<img src="corner4.jpg" /></td>
</tr>
</table>
</body>
</html>
What I want to ask is how I can stretch the height of the right div to 100%so that it equals to the height of the td (height of left div will increase according to users' action).
我想问的是如何将右侧 div 的高度拉伸到100%，使其等于 td 的高度（左侧 div 的高度将根据用户的操作增加）。
I have tried many ways and still cannot figure it out.Set height of div to 100%does not work.
我已经尝试了很多方法，但仍然无法弄清楚。将 div 的高度设置为100%不起作用。
What should I do to acheive this? Don't use table?
我应该怎么做才能达到这个目标？不使用表？
PS:
PS：
The code is changed. You can paste the code into the notepad and test it in IE.
代码已更改。您可以将代码粘贴到记事本中并在IE 中进行测试。
The code is edited again to add the DOCTYPE.
再次编辑代码以添加DOCTYPE。
采纳答案by garrow
Seeing as you already have tables for layout, I wouldn't really bother trying to do it the "right"way.
看到您已经有用于布局的表格，我真的不会费心尝试以“正确”的方式来做。
Just use another table.
CSS
只需使用另一张桌子。
CSS
<style type="text/css" media="screen">
#menu {
width:235px;
height:445px;
background-color:#660000
}
#mainContent {
height:100%;
width:auto;
background-color:#888888
}
#container {
width:100%;
}
</style>
HTML
HTML
<table id="content" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="corner1.jpg"/></td>
<td> </td>
<td><img src="corner2.jpg"/></td>
</tr>
<tr>
<td> </td>
<td valign="top" style="padding:0px;">
<table id="container" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="menu"><div>Menu</div></td>
<td style="width:10px"></td>
<td id="mainContent"><div>Main Content</div></td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td><img src="corner3.jpg"/></td>
<td> </td>
<td><img src="corner4.jpg"/></td>
</tr>
</table>
回答by Colin Campbell
Or how about just using a span?
或者只使用跨度怎么样？
eg.
例如。
<table width="100%">
<tr>
<td style="height:540px; width:100%; background-color:green;">
my name is earl!
</td>
</tr>
<tr>
<td style="height:540px; width:100%; background-color:yellow;">
<span style="height:100%; display:inline-block; width: 100%; background-color:blue;">
blinkers on!
</span>
</td>
</tr>
</table>
Don't worry too much about the 100% in the table elements, but rather look at the span..
The span :
不要太担心表格元素中的 100%，而是查看跨度。
跨度：
<span style="height:100%; display:inline-block; width: 100%; background-color:blue;">
blinkers on!
</span>
See the 'display:inline-block'? Now that is the important part..
I hope that this helps..
看到'display:inline-block'了吗？现在这是重要的部分..
我希望这会有所帮助..
回答by Vinze
maybe you can add a min-height to the right div equals to the value of height of the left one... it could maybe do the trick to what you want...
也许你可以在右边的 div 上添加一个 min-height 等于左边的高度的值......它也许可以达到你想要的效果......
回答by Ian Devlin
You could set the position of the div to be absolute, but then of course you'd have to position it absolutely.
您可以将 div 的位置设置为绝对位置，但当然您必须绝对定位它。
回答by judek
I have used jquery and the animate call to set heights of divs, but you can set the animate speed to 0.
我已经使用 jquery 和 animate 调用来设置 div 的高度，但您可以将动画速度设置为 0。
The example belows was for some mockups for quickly playing around with 2,3,5... block designs. The Jquery animate call is used to size the height of divs for main content, sidebar etc, ... but this may be a bit over the top for your requirement.
下面的例子是一些模型，用于快速使用 2,3,5... 块设计。Jquery animate 调用用于调整主要内容、侧边栏等 div 的高度……但这可能有点超出您的要求。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mock_2_ColGoldenRatio.aspx.cs" Inherits="ia._HtmlMocks.Mock_2_ColGoldenRatio" %>
<!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 runat="server">
<title></title>
<style type="text/css" >
/*normalise*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
font-size:100%;
font-style:normal ;
font-weight:normal;
border-collapse:collapse ;
border-spacing:0;
border:0;
border-width: 0px ;
text-align:left;
}
q:before,q:after
{
content:'';
}
/*center everything using html container*/
html{
text-align: center ;
}
/* wash with olive ; make body width max 976 px ; no margin ; relative position so other elements within */
body
{
background-color:Olive;
width:976px;
margin:0 auto ;
text-align: left ;
position: relative ;
}
#HeaderEnc
{
background-color : Maroon ;
}
#SearchEnc{
background-color: red ;
border-width: 0px ;
}
#MainBlogNav{
background-color:Yellow ;
}
/* postion relative to normal flow */
#ContentEnc{
background-color: Teal ;
position: relative ;
}
#ContentSideBarA
{
position: absolute ;
background-color: #AAA ;
left: 62% ;
width: 38% ;
}
#ContentMainEnc{
position: absolute ;
background-color: #888;
left: 0% ;
width: 62% ;
}
#ContentSideBarB{
position:absolute ;
background-color : #AAA ;
left: 0% ;
width: 0px ;
}
#FooterEnc{
position: absolute ;
background-color: blue ;
left: 0 ;
width: 100% ;
}
</style>
</head>
<body>
<div id="HeaderEnc">
The quick brown fo jumped over the lazy dog.
<br />
HeaderEnc
<div id="SearchEnc">SearchEnc</div>
<div id="MainBlogNav">MainBlogNav</div>
</div>
<div id="ContentEnc">
<div id="ContentMainEnc"><i>ContentMainEnc</i> :
<% Response.Write( GetContentBig()) ; %>
</div>
<div id="ContentSideBarA"><i>ContentSideBarA</i>
<% Response.Write( GetContentSmall()) ; %>
</div>
<div id="ContentSideBarB"><i>ContentSideBarB</i>
<% /*Response.Write( GetContentMedium()) ;*/ %>
</div>
<i>ContentEnc-Start</i>
<br />
<br />
<br />
<br />
<i>ContentEnc-Start</i>
</div>
<div id="FooterEnc" >FooterEnc</div>
</body>
</html>
<script src="../../Scripts/jquery-1.3/jquery-1.3.1.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/dimensions_1.2/jquery.dimensions.js" type="text/javascript" ></script>
<!--<script src="../../Scripts/Common/IaCommon.js" type="text/javascript" ></script>-->
<script type="text/javascript" >
/*
* ia.common 0.1.0
*
*/
var ia = {}
ia: "0.1.0";
// gets max settings from set of elements
var getBoundaries = function(elements) {
var maxHeight = 0;
var maxTop = 0;
var itemSelector = '';
var itemHeight = 0;
var itemPosition = {};
var itemTop = 0;
for (i = 0; i < elements.length; i++) {
itemSelector = elements[i]
itemHeight = $(itemSelector).height();
itemPosition = $(itemSelector).position();
itemTop = itemPosition.top;
maxHeight = itemHeight > maxHeight ? itemHeight : maxHeight;
maxTop = itemTop > maxTop ? itemTop : maxTop;
}
return { 'maxHeight': maxHeight, 'maxTop': maxTop };
}
// Rets truthy ; used by property get/set public fns
var SetIfOk = function(val) { return val; }
// IaPage class
var IaPage = function(objSpec) {
// override default page object with defaults from caller
var that = $.extend({
'speedFooterAnimate': 3000
, 'speedContentAnimate': 1000
}, objSpec || {});
// fn to move footer, ... to correct position : inmann clearing
that.arrangePageStructure = function() {
boundaries = getBoundaries(this.ContentElements);
$(this.FooterEncSelector[0]).animate({ 'top': boundaries.maxTop + boundaries.maxHeight }, this.speedContentAnimate);
$(this.ContentEncSelector[0]).animate({ 'height': boundaries.maxHeight }, this.speedFooterAnimate);
};
// Ret
return that;
}
var iaPage = IaPage(
{
'ContentEncSelector': ['#ContentEnc']
, 'FooterEncSelector': ['#FooterEnc']
, 'ContentElements': ['#ContentEnc', '#ContentSideBarA', '#ContentMainEnc', '#ContentSideBarB']
}
);
$(function() {
iaPage.arrangePageStructure();
}
);
</script>
