Set display:table; width: 100%;
on the parent element, remove float: left
from the sibling.
http://jsfiddle.net/byNpM/2/
Filling the available space with display:table-cell
-
15-03-2022 - |
質問
Is it possible to avail the second div to occupy the available space of the parent div without specifying manual width?
Here is the Fiddle for the tried demo.
.right_cnt {
display: table-cell;
background:#FFC;
}
NOTE: I need yellow box to occupy the available right space.
解決
他のヒント
It is possible to use table layout to do this, but it's not necessarily the easiest way: forked your fiddle to demonstrate.
An easier way is to modify the second cell to remove all table display properties and set the second element's overflow
to hidden
: another fork demonstrating this. zoom: 1
allows the technique to work in old IE. This might be simpler for your purposes, if you're happy with the side-effects of the overflow
This post might might be what you are looking for.
In particular look at Xanthir's answer:
The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context", which interacts with floats in a specific way. ... ...
It appears to me that, while display:table-cell
on the last div in a row with no width
will cause it to stretch to fill the enclosing parent display:table
div, the table-cell has an implicit 'min-width' behaviour that can't be turned off, forcing it to be the width of its child.
I had to resort to absolute-positioning the left cell on top of a wide padding on a 100% wide right cell. With this, the 100% wide inner div shrinks as required when the window is narrowed and the content scrolls.