I have an item on the DOM that I'd simply like to have fill its parent's width, regardless of what that is:
<div width="800">
<div class="filler"></div>
</div>
Ho开发者_JAVA百科w can I specify in CSS that the filler
class match the width of its parent?
.filler {
?
}
Have you tried: width: 100%;
?
Depending on what you inner item is, there are various approaches.
If it's a block-level element (a paragraph, a div, etc.), it will automatically adjust itself to fill 100% of the container's width.
If it's an inline element, too bad for you, it won't accept width:100%
until you convert it to a block-level element: display:block
.
Floated elements are a special case: they will only span to the width of their inner content, even if they're block level elements. They require width:100%
.
Absolutely positioned elements are even tougher: they need width:100%
, but the container also needs a positioning context, eg. position:relative
.
Examples of all four cases: http://jsfiddle.net/dD7E4/
If the inner element is not a div and has padding or margin, flexbox might be the best solution:
<div class="container">
<div class="filler"></div>
</div>
.container {
display: flex;
}
.filler {
flex-grow: 1;
}
See also this answer about how to fill remaining vertical space.
Unless there's something stopping them, block-level elements such as div
and p
will always fill the entire width of their container. If you have an inline element such as a span
or an a
, you could style it as display: block
to turn it into a block-level element, but this will also put a line break before and after it.
div is a block element and by default fill his parent.
if it doesn't you probably use float:left
or float:right
or display:inline
or your parent is not 800px.
(maybe you should try with style="width:800px"
or width="800px"
instead of width="800"
)
I usually put a color border to see how it works.
By default it will fill its parent element's width as div is an block element.
精彩评论