how to make full height cell in full height table in Internet Explorer
I have next html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html {height:100%;}body {height:100%;margin:0;}
h1 {form-size:20px;margin:0;padding:20px;}
</style>
</head>
<body>
<table style="width:100%;height:100%">
<tr>
<td>
<d开发者_如何学Civ style="background-color:#f00;">
<h1>This text should make height of this cell</h1>
</div>
</td>
</tr>
<tr style="height:100%;" id="row">
<td style="background-color:#c0c;">
<div style="height:100%;width:100%;background-color:#00f;color:#fff;">
This cell should take all unused space of table
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color:#0f0;">
<h1>This text should make height of<br> this cell</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
It works perfect in all browsers - except IE, where blue div inside middle cell takes space only for text. May be someone know how to stretch it to whole free space inside table?
UPDATE: I Know that tables are bad in page-layout. if you can show me example of div layout which have top and bottom block with variable height and middle part which use all free space of browser window I will use it. I promise =)
Don't use tables for layout please,
Use Divs and CSS, It is considered a bad practice to use tables:
http://shouldiusetablesforlayout.com
http://www.hotdesign.com/seybold/
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
Live Demo converted to DIV's
If you define a height for the body element then the blue cell does expand to fill the available space (JS FIddle demo). The problem is that an element of height: 100% takes up the full height of its parent, and for that to happen the browser has to know (be told) what the height of that parent element is.
You could achieve this with JavaScript (JS Fiddle Demo) (or any one of the various libraries, eg jQuery: JS Fiddle demo1), or by using:
table {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
JS Fiddle demo
- I have no idea why using the jQuery version results in scrolling. I've tried removing
padding,marginetc from the various elements (bodyandtable), but it results in the same behaviour. Which is a tad weird, to me.
Using <div> should be something like this:
<div style="width:100%;height:100%;background-color:#00f;color:#fff;">
<div style="background-color:#f00;">
<h1>This text should make height of this cell</h1>
</div>
This cell should take all unused space of table
<div id="footer" style="background-color:#0f0; position:absolute; bottom:0px;width:100%;">
<h1>This text should make height of<br> this cell</h1>
</div>
</div>
The content in the center is not within a <div>, but in the main <div> itself. :)
加载中,请稍侯......
精彩评论