Hi I want to set table height 100% to its parent div without define height in div. My code is not working. I dont know what I am missing. Fiddle link
<div style="overflow:hidden">
<div style="float:left">a<br />b</div>
<table cellpadding="0" cellspacing="0" height="100%" style="border:solid 1px #000000">
<tr>
<td valign="middle">c</td></tr>
</table>
</div>
Not possible without assigning height value to div.
Add this
body, html{height:100%}
div{height:100%}
table{background:green; width:450px}
DEMO
You need to have a height in the div <div style="overflow:hidden"> else it doesnt know what 100% is.
This is how you can do it-
HTML-
<div style="overflow:hidden; height:100%">
<div style="float:left">a<br>b</div>
<table cellpadding="0" cellspacing="0" style="height:100%;">
<tr><td>This is the content of a table that takes 100% height</td></tr>
</table>
</div>
CSS-
html,body
{
height:100%;
background-color:grey;
}
table
{
background-color:yellow;
}
See the DEMO
Update: Well, if you are not looking for applying 100% height to your parent containers, then here is a jQuery solution that should help you-
Demo-using jQuery
Script-
$(document).ready(function(){
var b= $(window).height(); //gets the window's height, change the selector if you are looking for height relative to some other element
$("#tab").css("height",b);
});
Had a similar problem. My solution was to give the inner table a fixed height of 1px and set the height of the td in the inner table to 100%. Against all odds, it works fine, tested in IE, Chrome and FF!
to set height of table to its container I must do:
1) set "position: absolute"
2) remove redundant contents of cells (!)
Related
I am trying to put a red rectangle icon followed by some text within a HTML Table cell and I am getting very strange behavior here. I am using just a DIV to draw the red rectangle as shown in the example here. I want the height of rectangle to be the height of the cell so I set the height: 100%
https://jsfiddle.net/pm43k26w/1/
<table border="1">
<td>
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
The solution kind of works in Chrome but not in FireFox. FireFox just shows a blank space. It appears it does not like it when I set the height to 100% Can anyone explain why? What's the best way to accomplish this if DIV isn't the right way to go for the rectangle?
Thanks.
Firefox needs content in the div. The following modification will do. The numerical entity is Unicode's 'zero width space character'. A non-breaking space ( ) will do as well, of course.
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
See this fiddle.
Try setting the height of the parent element.
<td style="height:20px">
That should help with the Firefox problem.
Edit: JSFiddle:
https://jsfiddle.net/prove64m/
First of all you forgot the <tr> tag.
So this should be the correct HTML:
<table>
<tr>
<td>
<div></div> first text
</td>
<td>
<div></div> second text
</td>
</tr>
</table>
Then the CSS part:
table {
border:1px solid;
}
td {
height:40px;
}
div {
display:inline-block;
vertical-align:bottom;
width:10px;
height:100%;
background:red
}
Pay attention that the height is ALWAYS evaluated, so, if there isn't any explicitily set, there is nothing "to compute"; we did this here:
td {
height:40px;
}
Other important thing; i guess you would like to control the position of the text after the <div> element; this is possible with online-block elements in this way:
div {
...
vertical-align:bottom;
...
}
Other possible values are: middle, top,...
here the Fiddle: https://jsfiddle.net/pm43k26w/5/
Firstly, you need to understand the problem here. CSS Properties such as height are "Computed". In this particular case, the computed height of the first div (let's call it unseenForce, shall we?) is 0 while its cousin, aptly named seenForce is 10px. See this below :
http://jsfiddle.net/gvo4kf41/
$(document).ready(function() {
$('.Info').html('The computed height of the unseenForce is ' + $('#unseenForce').height() + 'px <br />');
$('.Info').append(document.createTextNode('The computed height of the seenForce is '+ $('#seenForce').height() + 'px'));
});
.Info {
color: red;
margin-top : 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
This is because none of the ancestors of the unseenForce have a specific height to them. Hence, Firefox is unable to attach a height to it.
What you need to do it force the Computed value of height to be greater that 0. There are many ways to do it and all the answers here show you different ways of doing it. Choose the one which suits your needs.
Here's the way I would do it. Just add height to the row (<td>).
table td {
height: 10px;
}
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
Hope this helps!!!
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'm attempting to make an image take all the remaining width available for a table and span the entire height of a table without extending it any further, with overflow:auto to scroll if there's not enough height.
The width bit is easy, but no matter what I do the table cell containing the image will extend the height of the table. Is there a way to prevent this, short of explicitly setting the image's height?
Thus far the solutions I've found differ on browser, so aren't ideal. You could render different markup based on the client. (But still looking for a more universal answer.)
Updated again for the most universal solution so far:
<style>
div.ImageBlock
{
height:100%;
width:100%;
left:0px;
top:0px;
overflow:auto;
}
div.IE_CompatMode
{
position:absolute;
}
</style>
Either works in Chrome, and the IE_CompatMode has to be added when IE has compatibility mode On.
<td rowspan="2" style="position:relative;">
<div class="ImageBlock [conditional:]IE_CompatMode">
<img src="Images/Jellyfish.jpg" style="position:absolute; top:0px; left:0px;" />
</div>
</td>
And nothing (that I've yet tried) works in Firefox.
You would have to use a wrapper element around the content to restrict the height.
<table>
<tr>
<td><div class="overflow">This is short.</div></td>
<td><div class="overflow">This is longer.</div></td>
<td><div class="overflow">This is really long and repeated. This is really long and repeated.</div></td>
</tr>
</table>
.overflow {
max-height:40px;
overflow:hidden;
}
var tableHeight = $('table').height();
$('.overflow').css('height',tableHeight + 'px');
Could always give the image a percentage e.g. height="100%" that should make it the full size of the cell that it is in but would restrict overflow.
Can #parent div resize by #child div (*when #child div use position:absolute;)
just like #t_parent table is resize by #t_child table
<div id="parent" style="position:relative; width:500px; height:500px; border:#F00 3px solid;">
<div id="child" style="position:absolute; left:20px; width:800px; height:500px; border:#06F 3px solid;"></div>
</div>
<table id="t_parent" width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<table id="t_child" width="800" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>TEXT</td>
</tr>
</table>
</td>
</tr>
</table>
If there is fixed width/height - no, you cant resize.
position absolute inside of position relative make the div detached from parent so you cant re-size.
But try remove position:absolute and give parent div display:table then you can re-size it.
Check this
http://jsfiddle.net/9gxyH/
First thing if you want the child div resize its parent div so there no need for position:absolute because we use position:absolute when we want that the element not effect other elements.
but if you want this functionality so you need to do a little bit of js.
check http://jsfiddle.net/sandeep/CLb5r/13/
My page layout is structured in tables (I know this is not ideal - I inherited it).
I am trying to display an iframe in a div with the following code inside a table cell () as below:
<td class="style24" style="width: 800px">
<div id='outerdiv '>
<iframe src="www.google.com" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>
The issue is the iframe causes the table cell to grow and then pushes the content on the right of the page off the page!
Is there a way to limit the size of the iframe that's displayed that won't make the table cell grow? Limiting the width of the iframe doesn't seem to have an effect, as soon as the div content is placed in the td the effect occurs.
You can try adding the width and/or height to the iframe and #outerdiv (add overflow-x to the #outerdiv as a failsafe):
<td class="style24" style="width: 800px">
<div id='outerdiv' style="width:800px; overflow-x:hidden;">
<iframe src="www.google.com" width="800" frameborder="0" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>
place an css overflow attribute on the outerdiv, you might also declare the width of the iframe
This is working for me, but without seeing styles associated with #outerdiv, .style24, and #inneriframe, it's a little difficult to tell if this would work for you or not.
#outerdiv {
width: 800px;
height: 600px;
}
#inneriframe {
width: 100%;
height: 100%;
}