I have the following structure:
http://jsfiddle.net/poztin/q9v9j/10/
I'm trying to get the fieldsets to vertically fill their parent table cells.
My understanding is that in order for the fieldset to have height 100% I need to set a fixed height on it's parent.
However the content within each fieldset is generated dynamically, therefore I cannot set a fixed height.
The above jsFiddle works in Chrome, but not IE.
How can I achieve this in IE? I'd prefer a css solution but would also welcome jQuery suggestions.
You have put the td height as 1px. I removed it.
Is this what you are looking for? http://jsfiddle.net/q9v9j/13/
The main element "table" has to have height:100%, then it magically works.
See here:
http://jsfiddle.net/luissanchezm86/nGCdx/13/
Related
I am making a header component and what I want to achieve is to make my header picture stretch to the full width of the webpage, even when it the browser shrinks, however when you shrink the browser the picture does not stretch 100% and is driving me insane. I don't want to remove the scroll-x property, so how can I fix this? What am I doing wrong? Here is is a picture of my issue:
https://imgur.com/YCZOYGE
And here is a codepen with my code:
https://jsfiddle.net/philipkovachev9/ax2Ljtvn/5/
So, as promised I found a solution.
Change display:flex from your parent div, to display: inline-block and remove width:100%. You div will have the size of your content, even when it overflows.
Setting the width to 100% will be relative to the parent, it was the body. However, the body didn't include the overflow.
I hope it works :)
PS: If you still need display:flex, create a child div, with flex attribute.
add this css
body{padding:0;margin:0}
There is no height specified for body tag but why is it taking some amount of height when I see in inspect element?
here is the code
http://jsfiddle.net/9TzEC/3/
And here is the example screen
Look to the left of the jsFiddle screen, uncheck "Normalized CSS"
http://jsfiddle.net/Kyle_Sevenoaks/LwBLH/1/
#Sowmya every block tag/element having auto height, If content will increase apparently element height will increase , less content=less height, large content= long height !!
I got the solution. That was happening because of the table added inside the "content_wrap" div. this is was not considering the table inside it so I added a blank div around the table then it is working as child of the div "content_wrap".
Updated fiddle http://jsfiddle.net/9TzEC/7/
add this css to the end of css file
.content_wrap {overflow:auto;}
this is because of the floating table in this div. if you need I will explain it in detail just ask ;)
I have this:
http://jsfiddle.net/UHrLH/1/
I set the height on the box element to auto, but min-height is 200px;
Now if i try to make more content in the first box, the height expands but it creates a big white space under it. I do not want that, i want to have the box under eachother like you can see above, where the height on all boxes is 200px
See the issue here:
http://jsfiddle.net/UHrLH/2/
http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
http://jsfiddle.net/UHrLH/11/
I have added an additional div if that is ok for you...
<div class="box_Container">
I've got a div that contains an unordered list that gets updated by an ajax query. It's used for a livesearch.
Now I have this problem that when I set the height of the div to a fixed height (let's say 200) that the results are shown as they should. But when I don't set the height, or set it to auto, the div has a height of 0 when the searchresults are added to the ul.
I think this has something to do with the ajaxquery and the browser not recognizing the new height, but I don't know how to set it the right way.
How can I fix this?
Thanks in advance,
Try adding some dummy content statically on the html page and see if the height is still 0. If it is then you have a CSS issue. Most probably the contents of the div (list) are absolute positioned so the parent div cannot know the list's height.
You can try adding adding a min-height to the div containing the ul.
min-height: whatever-you-want-minimum-height;
I have table within the div. If I view it with IE9 or FF then it is ok. But if I view it within IE8 the table grows beyond the div border. Any ideas?
<div>
<table width="100%" >
<tr>
<td>
</td>
</tr>
</table>
</div>
found the solution here:
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
The trick is to use the CSS property table-layout. It can take three
values: auto, fixed, and inherit. The normal (initial) value is auto,
which means that the table width is given by its columns and any
borders. In other words, it expands if necessary.
What you want to use is table-layout:fixed. Bam! Now the table is as
wide as you have specified in the CSS. No more, no less. And to my
great surprise this seems to be widely supported by browsers. The only
browser of any significance that does not support it is IE/Mac, and
the significance of that browser is rapidly approaching zero.
Next is deciding what to do with the content that doesn’t fit in the
table anymore. If the table only contains text, word-wrap:break-word
(word-wrap is specified in the CSS3 Text Effects Module) will force
the browser to break words as necessary to prevent overflow.
You could set it inside its own div with overflow: scroll; so that it makes a scrollbar when the table expands too much...
Add the style display:table to the div tag. This causes the element to act like a table.
Give table width as 100% so that it will occupy div and wont cross it.
As user384080 mentioned, table-layout:fixed should be added. However, merely having table-layout doesn't always fix the problem. Please make sure that you add the width attribute as well:
<table style="width:100%;table-layout:fixed">
check what box-sizing is set by default by the browser.
box-sizing: content-box; means:
The specified width and height apply
to the width and height respectively
of the content box of the element. The
padding and border of the element are
drawn outside this area.
box-sizing: border-box; means:
The specified width and height
determine the border box of the
element. Any padding or border
specified on the element is drawn
inside the remaining area. The content
box is computed by subtracting the
padding or border widths of the
respective sides from the specified
width and height.
it night just be a matter of changing the box-sizing value.
there's an article about it here: http://ie8demo.com/BoxSizing.aspx
Do you have a width set on the div? If so, it will stick to its width, allowing the table to overlap. Try removing the width and it will expand to its container's width. If you want thwe div to fit the table size, you can float it.
In addition to the first answer, make sure that the container element of the div has overflow: auto or scroll. The clearfix hack is helpful, too.