Question

我的HTML看起来像这样：

<div class="container">
    <div class="header-content">
       hello!
    </div>
</div>

我最近遇到的情况是我需要标题＆＃39;成为全宽背景的窗口的100％。通常我会这样做css：

<div class="header-background-color">
    <div class="container">
        <div class="header-content">
          hi!
       </div>
   </div> 
</div>

不幸的是，我相当深入一个框架，无法包装容器。我需要在容器内构建它。

<div class="container">
    <div class="header-background-color">
        <div class="container">
            <div class="header-content">
               hi!
            </div>
        </div>
    </div>
</div>

我无法找到实现这一目标的方法，我想知道这是否可能。

如果我将此css用于header-background-color

background: blue;
left:0;
position: absolute;
width: 100%;

元素看起来正确，但页面流被中断。

有人知道我的目标目标是否可以达到？

我做了一个bootply来说明这个http://www.bootply.com/129060

Answer 1

您可以使用子（>）选择器选择第一个容器元素并将其宽度设置为100％并删除填充。

.example-3 > .container {
  width: 100%;
  padding: 0;
}

这假设你总是有一个带有唯一类名的包装器（如果它是第一个div，则使用body），但这也允许你删除导致的position: absolute重叠和高度可以保持动态。

请参见forked bootply：http://www.bootply.com/129065

我添加了一个在div中插入一个段落的按钮，这样你就可以看到它不受高度变化的影响。

Answer 2

我唯一能想到的是使用dumby元素来维持垂直空间（即设置高度），然后在全宽内容上使用绝对定位（如你所述）。这非常难看，如果内容的高度是动态的，那么它将不是一个好的解决方案。

请参阅forked bootply中的#content_dumby元素：http://www.bootply.com/129063

twitter bootstrap - 是否可以撤消＆＃34; container＆＃34;利润率

2 个答案: