I'm hoping I can use flexbox to solve a div stacking problem.
I have one container div. Its height is 100vh.
Inside that div, I have two divs.
One, contains an image. Its height is dependent on the size of image, which grows proportional to browser width up to a max-width.
A second div is on top of the first div. I want its height to be equal to the remaining height of the div.
Can flexbox compute this for me automatically? Hoping so.
The answer is yes. Try appying flex: 1 to the second div. That tells it to stretch to fill the remaining space in the container.
Here's an illustration of the effect: DEMO
Related
I have 2 divs inline. One of which has fixed width. I want div to fill in all the space until the second div when the window adjusts. To clarify the situation, take a look at picture below:
After resizing window I need to get next layout:
How to do this?
You can take advantage of display:table-cell.
Demo
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 table inside a DIV , but the div height and width don't expanded automatically when the Table(:edited:) height and width are increased
<td><div/></td>
DIV's width should stretch the full width of the TD, minus TD's padding and DIV's margin (if any). However, DIV will never grow taller than its content, regardless of placement - you have to set its height. You should be able to set DIV's height to match TD's height, whether you use JS or whether that's rendered by server.
BTW, unless you're targeting some special height, the TD will grow in height as DIV grows, and DIV will start growing vertically as its content (assuming text) is longer than DIV's preset width (in your case, TD's width).
How do I make a div that has a variable width? So I want a div to span a certain width inside a container and if there is another element in it, the div will automatically fill a portion of the of the width.
Don't give the div a width and it will fill 100% of the horizontal space. Add margins to it (as either % or px) and it will shrink accordingly.
It sounds like you may be asking how to have something inside the div force it to grow wider with its content. I don't think that's possible without javascript.
I have the following code in this fiddle , I want the height of the profile_window_content to be more than the height of the image in jcrop-tracker.Height of div is set to auto , then why it is not greater than image height. Please help.
Floated content is supposed to fall out of the bottom of containers.
Set overflow to hidden if you want to cause containers to wrap floated elements anyway.