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

Question

I'm using Bootstrap 3 and want to create a layout kind of like this:

The big red box is a large header for the page. I have wording inside this box that is spanning 8 columns, then a sidebar which spans 4. I want the sidebar to start inside the header box, then overflow it to trickle down to the rest of the page, like in the diagram.

What is currently happening is that the blue sidebar is instead increasing the height of the red box, so the red box is always equal to the height of the blue sidebar.

Instead, I want the red box to be equal to the height of the text within it, and let the blue box overflow the red box in to the page below.

How is this possible, using Bootstrap's grid system and columns?

Answer 1

Two practical options.

A) Set a height fixed height for the red bar

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

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

Then place the blue bar inside the red one.

Option B) use absolute position. this doesn't require the red bar to have a fixed height!

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


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

}

Feel free to ask any questions

Answer 2

I don't know Bootstrap, but pure CSS solution is like:

#sidebar {
    float: right;
}

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

Answer 3

You basically just need to unclear the clear-fix of bootstrap for the particular div elements. Then you can use bootstraps pull-right class to float the sidebar and add a min-height to the header.

Here is an example.

 @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>