I am using a table based layout (using display: table properties). The container has a dynamic height (I have set min and max height properties on the container). All the inner elements within the container have their heights set to 100%. The idea being that they will always fill the available space.
The problem I am having is that elements that have display: table-cell will continue to expand above the 100% allocated space if they contain content that is taller than them. This happens even if I set overflow: auto.
I have created a jsfiddle to demonstrate the issue. Please see here:
http://jsfiddle.net/eSRA8/
In this example, the max-height of the container is 300px, but an inner element called .tall-content has a height of 400px. This makes the container grow taller than its max-height.
In Chrome this actually works how I want it to. However it does not work in Firefox or IE.
Please note that since the container height is dynamic, I can't set a fixed height on any of the inner elements (unless it is possible to use jQuery to assign the correct height on document load and on window resize, but this would need to respect the min and max height settings of the container).
Does anyone have any idea how I can achieve the desired result? I would like to keep as much of the existing structure as I can but if the same result can be achieved in a slightly different way then I'm open to that. Either way it needs to work the same in all browsers.
That looks to be a limitation of display:table;
You may be able to put the "container" in another div with max-height:300px;overflow:auto;
Here's some info which might explain why you are having difficulty:
http://www.w3.org/TR/CSS21/tables.html#height-layout
Related
I have a CSS grid with a scrollable element placed in one of the grid's areas.
What'd I'd like is for the item to shrink if the content is too small to fit the area. I did this by setting align-self to start.
This works great, until the content grows. The element resizes past the end of the grid area it's assigned to.
How can I use align-start but still cap the height to the height of the grid area? I would have expected this to be the default behavior.
One solution is to have the element stretch but then have a child element inside it that contains the actual content. The parent would have overflow: auto and the child would simply grow until it's too large for the container. Unfortunately, this kills the box-shadow.
I could put the box-shadow on the outer element in this case, but then it'll be too large when the content is small.
Any ideas what I can do here? I considered using some Javascript shinnanigans but I'm not even sure how I'd grab the height of the grid area from JS.
JSFiddle: https://jsfiddle.net/1kLenm5a/2/
Apparently max-height: 100% works. I could have sworn I tried that but I was messing with so many other settings at the same time I must have missed it.
Thanks.
I am trying to get a div to expand to fill its container without causing that container to expand beyond the browser window's width, as in this page. Click "Expand" next to "Stack Trace in the last entry.
What it's supposed to do is show a horizontal scrollbar.
What it's actually doing is expanding beyond the width of the window.
I can get it to sort of work if I give the <div class="stack"> element a max-width in pixels, but I want it to expand to fill no matter how wide the window is, without expanding beyond it.
How can I fix this layout? What's a general way with css to get an element to expand horizontally to fill its container while not going beyond the window's edge?
The Page is back on now!
I cann't get your table stuff sorted. There are some invalid width Parameters.
You should use div-Containers rather then tables to layout your page!
The workaround solution I came up with was adding a max-width to the expand/collapse div. It doesn't really prevent the table being wider than the window, but it solves 95% of the cases.
Don't use tables, use DIV's and for full width use
width: 100%;
This will always use up 100% of the browser window width.
You can provide you outer Div width:100% so it will take browser width. Or else you can calculate browser width with Jquery $(document).width(); and store this in variable and provide to your outer div.
I hope the title was clear enough to get the general idea. The problem itself is a little bit trickier. To help with the understanding see my illustration below.
Since I don't have enough reputation points to include the illustration directly, here is a link to it on flickr.com: http://www.flickr.com/photos/cumbrowski/12009919663/
Or link to image here at Stackoverflow.com: http://i.stack.imgur.com/1Kswi.png
Phrasing it out in full-text.
The outer-most container should always be vertically and
horizontally centered in the available browser window. Both Width
and Height are dynamic, but the height cannot exceed 90% of the
available window height.
The inside of the container has 3 containers.
The top-most container has a fixed height but the width should span
the entire outer container width.
The bottom-most container should also span the entire width of the
outer container, but it's height can vary, based on it's content.
Preferably, If the container is empty, the height should shrink to 0
(if possible).
The center-most container controls the width and height of the
outer-container, except, if the total height of the outer container
would exceed the maximum of 90% of the available window height. In
that case the center-container should show scroll bars.
NOTE:
If there is no pure CSS based solution possible and the help of JavaScript needed, okay, sad, but if necessary, what can I do?! jQuery would be okay in that case as well.
I have a div in my page. I set it's width to 500px. but sometimes it's content get space more than 500px. so I set it's min-width property to 500px.
it expect that is takes 500px by default and take longer according to it's content. but it takes whole of the page's width by default.
But if I replace the Div by a Table, it works correctly.
Does anybody know the reason?
Please see the demo.
Demo.
You have to set in css like
min-width: 200px;
width: auto;
float: left;
Normal block and things like tables, floats, inline blocks etc. use different algorithms of calculating width. For the normal block, the width is usually the available width of the container, and min-width is taken into account only if the container is narrower than it. For the latter things, the width algorithm is shrink-to-fit.
But there are several ways to make the normal div behave like a table.
I'm trying to create a table of rows, each of which has some content in some block element (I'm using a DIV in this example for simplicity) whose element I want to stretch to the full height of the TD cell. In this example, the "test" text on the right should have its containing grey DIV filling up the full height of the containing TD cell:
http://www.game-point.net/misc/browserTests/scratchpads/fullTableCellHeight/
I don't want to explicitly set the height of anything (except maybe to a percentage) - setting height:100% on the child DIV doesn't change its height. Is there any way to do this? It seems absurd that the browser, which obviously knows the table cell's rendered height, provides absolutely no way to size a child element to fill it without using Javscript!
NOTE: I'm aware that there are other questions similar to this but they don't seem to take into account CSS3's new flexbox functionality - perhaps that could solve this problem?
You can set the parent element to relative positioning and the child to display block and it should fill the height. I use the technique a lot when trying to get link text to fill the entire button container. Hopefully, it translates to what you are trying to do but since you have no code to show I will give you a brief example of a real life scenario when I use it:
<div style="position:relative; width: 50px; height: 50px;">
some link
</div>
I'm told by Boris Zbarsky himself that it is completely impossible to do this - make a child element of a table cell fill the cell's full height - unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can't be bothered.