Element width with position: absolute (box-sizing: border-box)

Question

Element width with position: absolute (box-sizing: border-box)

Navigation

#1 by (2 votes)

4

Important: I'm using Twitter Bootstrap, so everything is with box-sizing: border-box .

The difficulty is this: I have an element with absolute positioning. I want the width of it to be equal to that of the parent element:

div.elemento-filho {
    position: absolute;
    width: 100%;
}

That almost works. My problem is that the element is getting wider than the parent, because width has included the parent's ( margin ) borders.

div.elemento-pai {
    width: 180px;
    margin: 0px 15px;
}

In this case, I would like the width of the child element not to consider the margins, that is, to measure 150px instead of 180px .

I can not set the width of the child element, as it has to work for parents of different widths.

Can you do that? In what way?

css

asked by anonymous 11.03.2014 / 16:49

1 answer

Search for isolated components in graph WebRTC JavaScript with Java / PHP server

score 2 · Accepted Answer

In this case it is recommended that you use position:relative in the parent element, this will cause child elements to use it as the calculation basis.

Example [ JSFiddle ]:

HTML

<div id="pai">
    <div id="filho">
    </div>
</div>

CSS

#pai{
    width: 180px;
    margin: 0px 15px;
    border:1px solid red;
    position:relative;
    height:10px;
}

#filho{
    position: absolute;
    width: 100%;
    border:1px solid blue;
}

Links that may be useful: w3schools , maujor