CSS - 如何防止子元素增加其父元素的高度，而是溢出？

Question

我正在使用Bootstrap 3并希望创建这样的布局：

大红色框是页面的大标题。我在这个框内写了8个列，然后是一个横跨4的侧边栏。我希望侧边栏在标题框内启动，然后将其溢出以逐渐渗透到页面的其余部分，如图中所示。

目前发生的是蓝色侧边栏改为增加红色框的高度，因此红色框总是等于蓝色侧边栏的高度。

相反，我希望红色框等于其中文本的高度，让蓝色框溢出红色框到下面的页面。

这怎么可能，使用Bootstrap的网格系统和列？

Answer 1

两个实用选项。

A）为红条设置高度固定高度

#redBar {
    height:250px;
    overflow:visible;
}

#blueBar {
    height:400px; /*or whatever*/
    float:right;
}

然后将蓝色条放在红色条内。

选项B）使用绝对位置。这并不要求红条有一个固定的高度！

#redBar{
    position:relative;
    overflow:visible;
    /*any other css you want*/
}


#blueBar {
    position:absolute;
    top: 0;
    right:0;

}

随意提出任何问题

Answer 2

我不知道Bootstrap，但纯CSS解决方案就像：

#sidebar {
    float: right;
}

#content_which_should_appear_under_sidebar {
    display: block;
    clear: right;
}

Answer 3

你基本上只需要清除特定div元素的bootstrap的clear-fix。然后，您可以使用bootstraps pull-right类来浮动侧边栏并在标题中添加min-height。

这是一个例子。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

body {
  color: white;
}

.red-header {
  background-color: red;
  margin-top: 0;
  min-height: 120px;
  padding: 10px;
}

.blue-sidebar {
  background-color: blue;
  margin-top: 20px;
  padding: 10px;
  font-weight: bold;
  font-size: 18px;
}

.unclear:after {
  clear: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="page-header red-header">
  <div class="container-fluid unclear">
    <div class="row unclear">
      <div class="col-sm-8">
        <h1>Big heading text goes in this div and is really big and stuff, as you can see</h1>    
      </div>
      <div class="col-sm-4 pull-right blue-sidebar">
        <p>More stuff goes inside this div and fills up as it trickles down the page hopefully this diagram was really helpful to explain my point. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fugit modi ea quod adipisci eum a, eius neque molestiae alias quos commodi maiores inventore voluptatem sit numquam error impedit placeat!</p>
      </div>
    </div>        
  </div>
</div>