在满足的div内扩展到一个div的全宽

时间:2014-04-14 09:15:32

标签: css html css-position

我有一个宽度设置的div(例如980px)和一个div的子节点,我想扩展到完整的浏览器宽度(不扩展父节点或溢出任何东西)。

值得说的是身体被定位为相对元素(我无法改变它)。

我想过使用绝对元素,但是附近的其他元素遇到了麻烦。

非常感谢任何帮助。

Example

1 个答案:

答案 0 :(得分:0)

你不必做任何事情来将内部div扩展到外部div的100%,如果你接受像往常一样应用边距和填充等内容。请看一下我为您设置的示例:

http://jsfiddle.net/3e4yy/4/

HTML:

<div class="outer">
    <div class="inner">
        This is the inner div which automatically takes all available width inside the parent container element, which is the outer div in this case.  This is the inner div which automatically takes all available width inside the parent container element, which is the outer div in this case. This is the inner div which automatically takes all available width inside the parent container element, which is the outer div in this case.     
    </div>
</div>

<hr>

<div class="outer">
    <div class="inner">
        This is the inner div which automatically takes all available width inside the parent container element, which is the outer div in this case.  
    </div>
</div>

CSS:

body {
    margin: 0;
    padding: 0;
    width: 1100px; 
    height: 500px;
    background-color: lightgray;
}
div {
    margin: 0;
    padding: 10px;
}
.outer {
    width: 980px;
    background-color: blue;
}
.inner {
    background-color: green;
}