I have a layout where I need tabs at the top, and content to fill the rest of the space.
So to make the bottom content div stretch I would need to have:
style="height:100% - 20px;"
Where 20px is the height of my tabs. Obviously that code isn't valid but it illustrates my point. So what I tried next was a table where the td in the fist tr had a set height(20px) and the td in the bottom row had no height set. The table was set to 100% both ways. And this does work, the bottom td stretches to fill. However as soon as I put the code in the project I am working on it doesn't work, and this is because of the doctype the project is using(which I cannot change):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The reason I say it doesn't work is that inside that content td there is a div set to 100% width and height, and unless the td its in has a defined height it doesn't seem to be able to see what 100% is, and simply adjusts the the minimum size it can be according to its content.
It doesn't need to be a table layout, i would prefer div's actually - but either way.
Thanks
Does this help?
http://www.themaninblue.com/writing/perspective/2005/08/29/
I know it's mainly to do with a footer but a side-effect of that is to stretch the content to 100% height.
AS far as I understood your question, using a table for anything other than tabular data is a serious no go area.
Check out this Dynamic Drive script for tabbed content article, it might help you out a lot :)
Edit:
<div>
<h4>Heading</h4>
<div>
<ul>
<li><a>Tab</a></li>
<li><a>Tab</a></li>
<li><a>Tab</a></li>
</ul>
<div>Content for Tab 1</div>
<div>Content for Tab 2</div>
<div>Content for Tab 3</div>
</div>
</div>
I believe this is a much better way to lay it out, then it's all wrapped in one div that can define it's own height :)
Try setting the height of the tr elements instead of the td (in IE6 it still won't work).
Or try something like this:
<style type="text/css">
html, body, .wrapper {
height: 100%;
width: 100%;
margin: 0;
}
.head {
height: 20px;
}
</style>
<div class="wrapper">
<div class="head">header</div>
<p>content</p>
</div>
I don't know if that's what you're looking for (since I don't really understand your needs, and you got so many jQuery addons for that...)
did you try
<table width="100%" height="100%">
<tr style="height:20px; display:block;">
<td>pwet</td>
<td>test</td>
</tr>
<tr style="height:100%;width:100%;">
<td style="background:red; width:50%;"></td>
<td style="background:blue; width:50%;"></td>
</tr>
</table>
EDIT : Since you're using table, the td's from the first tr should be a th and the first tr should be wrapped with a thead
Related
Imagine you have a complex structure with 2 elements in a table cell. Just like that:
<table>
<tbody>
<tr>
<td>
<div class="wideDiv">Here goes some very wide content</div>
<div class="anotherDiv">This content doesn't have to be wide.</div>
</td>
</tr>
</tbody>
</table>
.wideDiv has content that may be wider than the page itself. In this case it forces .anotherDiv to get all this space too. I'd want to force .wideDiv to be not wider than the page itself (using scroll, of course), it works this way if we don't wrap divs with table. Fixed size is an obvious solution, but is there any other way?
Here's working example:
http://jsfiddle.net/GbEvT/2/
Add
.anotherDiv {
width: 100vw;
}
Here's the update: http://jsfiddle.net/GbEvT/4/
It tells anotherDiv to take 100% of the screen, not more.
Here, you have another solution:
table {
width: 100%;
table-layout: fixed;
}
I found several questions addressing similar problems, but each solution has a particularity that prevents it from applying to this situation...
My issue is that I want an absolutely positioned, 100% width, div inside a table cell. I can't use fixed widths or heights anywhere because all the content can vary in width and height. I want the div to be positioned from the bottom of the cell height, which is influenced by the (variable) height of the content in the next cell.
The code below works fine in IE8 (yeah, still have to support it...), IE11 and Chrome — the red div stays contained within the left table cell. In Firefox however, the div is actually sized according to the width of the TABLE, covering part of the cell on the right.
What can I do to make it work in Firefox?
Demo: http://jsfiddle.net/AGYGH/
HTML:
<table id="OuterTable" border="1">
<tr>
<td id="TableCell">
<table id="InnerTable" border="1">
<tr>
<td>Dummy text of varying length</td>
<td>Dummy</td>
</tr>
</table>
<div id="AbsoluteDiv">
<div id="InnerDivLeft">Left Div</div>
<div id="InnerDivRight">Right Div</div>
</div>
</td>
<td>
<select multiple="multiple" size="10">
<option>Varying length options</option>
</select>
</td>
</tr>
</table>
CSS:
#OuterTable {
position:relative;
}
#TableCell {
vertical-align:top;
position:relative;
}
#AbsoluteDiv {
background-color:red;
position:absolute;
width:100%;
bottom:30px;
}
#InnerDivLeft {
float:left;
}
#InnerDivRight {
float:right;
}
I've ran into this problem as well. According to the spec, table cells cannot be positioned. Meaning FireFox is doing it right, and everyone else is doing it "right".
Kinda hacky, but you could always use div's with "display: table-cell" THEN position them relative.
This article has a good JS alternative for the issue.
Thanks to Seth for pointing me to the JavaScript solution, which has the added benefit of also fixing small padding/margin issues on IE in my 'real world' usage.
So, I've wrapped the entire content of <td id="TableCell"> with a <div class="wrapper"> (as suggested by Hashem) and used jQuery to size its height to the actual height of the table cell:
$('#TableCell div.wrapper').height($('#TableCell').height());
Revised Demo (with the added wrapper colored blue) : http://jsfiddle.net/AGYGH/9/
I have a table with two columns. The first (which contains a menu) should have a
fixed width, while the second (containing some page content) can vary in width. The table should overflow the window (which it doesn't by default), because otherwise the browser reduces the width of the menu column if the content is very broad. But I cannot define a fixed width for the table (causing it to overflow) because I don't know the width of the content.
Overflow:scroll
does not seem to work with tables. I would be thankful for workarounds/solutions.
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">
</td>
<td id="rootTableContent">
</td>
</tr>
The solution to this problem is to use proper CSS (Divs/Spans, etc) to layout your website as opposed to tables. I'm all for using tables to display tabular data and you'll see me arguing for them in places that they're valid, but this is not one of them.
This is easily done with something like this:
<div style="float:left; width: 150px">
Navigation Code Here
</div>
<div style="float: left">
Other Content Here
</div>
<div style="clear:both"></div>
Obviously, I'm oversimplifying this solution, you're going to have more specific code to deal with your layout (need more detail to help more specifically) But, it's important to use the right tools for the job.
As others have stated, please don't use <table> layouts. It's old, clunky, and confuses screen readers and other accessibility software.
If you absolutely insist on using your method, you can try this:
Live Demo
<style type="text/css">
div.wrap {
overflow-y: auto;
width: 75%;
}
div.wrap table {
border: 1px solid #000;
width: 100%;
}
div.wrap table td {
padding: 20px;
}
</style>
<div class="wrap">
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">rootTableMenu</td>
<td id="rootTableContent">rootTableContent</td>
</tr>
</table>
</div>
I have three "panels" laid out along the row of a table. One is taller than the other two and I want all three panels to match the height of the tallest one. I tried styling the divs with height: 100%, but the the short panels stay short, even as the containing tds grow.
My HTML is generated by JSF, so I have limited control over its form, but I can modify the styles. I made a simplified version of the generated code below. The same problem occurs on IE8 and Firefox. However, IE8 renders the short panels vertically aligned to the top of the td, while Firefox renders them in the middle.
<html>
<head>
<title>Test Table</title>
<style TYPE="text/css">
td {border: 1px solid red; padding: 1px;}
.panel {border: 1px solid blue; padding: 1px;height:100%}
.panel-header{background-color: green; color: white;}
.panel-body {border: 1px solid green; padding: 1px; height:100%;}
</style>
</head>
<body>
<h1>Test Table</h1>
<table width="100%">
<tbody>
<tr>
<td>
<div class="panel" style="height:200px;">
<div class="panel-header">
Header One
</div>
<div class="panel-body">
Body One
</div>
</div>
</td>
<td>
<div class="panel" style="height:100%;">
<div class="panel-header">
Header Two
</div>
<div class="panel-body">
Body Two
</div>
</div>
</td>
<td>
<div class="panel">
<div class="panel-header">
Header Three
</div>
<div class="panel-body">
Body Three
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
<html>
I don't think that you can set the height to 100% without explicitly stating a height for the tds (or the table). It seems that you have to specify an explicit height on a parent element before height:100% will take effect. Perhaps you can modify your styles to be on the td tags themselves instead of the div containers?
If it helps being able to align the divs to the top instead of the middle, I made an example here of how to do it (add vertical-align:top; to the td tags). I did an example using only divs too, though I know you said you have limited control over its form.
If you know the maximum height of one element, setting the table or table cells to that height (ie. height:200px;) should make the 100% be taken into effect on the divs.
Edit If you're not adverse to using jQuery, I have updated my example here to do what you require.
height=100%;
or
height=inherit;
One of these should do the trick :)
My solution: http://jsfiddle.net/k6Dam/2/
Remove inline-styles (hope you can do that) and set min-height of the panel-body to 200px.
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>
<div 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, margin etc from the various elements (body and table), 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. :)