2013-06-13 11 views
5

Ich möchte, dies erreichen: enter image description hereSpalten mit gleicher Höhe und Hintergrundfarbe überquellenden Behälter

oder

enter image description here

Vorzugsweise nur in CSS.

Ich habe gesucht und diesen Artikel lesen http://css-tricks.com/fluid-width-equal-height-columns/. Es geht jedoch nicht wirklich um die Hintergrundfarben, die über das Containerproblem hinauslaufen.

+0

Dieses Bild ist eigentlich eine bessere Darstellung: http://i.imgur.com/3XYHwBk.png – tolborg

+0

Overflowing was Container? Sie müssen uns mindestens einen Code zeigen – Turnip

+0

können Sie einige Beispielcode in [Jsfiddle] (http: // http: //jsfiddle.net/) – Mark

Antwort

1

Sobald Sie ein div haben, das in einem übergeordneten Container gefangen ist, wird es schwierig sein, es horizontal überlaufen zu lassen. Wenn du das div, das du überfließen willst, außerhalb dieses Containers bekommen kannst, wäre es das Beste.

Wenn nicht, können Sie diesen Effekt mit den folgenden Befehlen erzielen: Vorher und Nach den DIVs, die Sie überlaufen möchten. Grundsätzlich geben Sie ihnen die gleiche Höhe und Hintergrundfarbe und positionieren sie dann rechts und links vom Hauptteil.

.overflowing-div { position: relative; } 
.overflowing-div:before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; 
    margin-left: -100%; 
    width: 100%; 
    height: 100%; /* or fixed height if you know the height of the div you want to extend */ 
    background-color: #ccc; /* same color as .overflowing-div */ 
} 

und dasselbe für die: nach, genau richtig und margin-right mit

+0

nicht tun, dass @MattCoughlin. Es wird die: vor und nach Elemente überhaupt nicht zeigen, was den Zweck völlig zunichte macht. overflow: hidden kann dem äußersten containing-Element der Seite hinzugefügt werden, um horizontale Scrollbalken zu verhindern, dies muss jedoch auf der Einrichtung der Site basieren. – DMTintner

+0

Bis jetzt bekomme ich das: http://jsfiddle.net/tolborg/mmMpH/. Wie Sie jedoch sehen können, habe ich js verwendet, um den Inhalt div zu bemessen. Die Elemente: before und: after haben eine Höhe von 100%, aber das ist nicht gut, wenn der Inhalt div die floated-Spalten nicht löscht. Allerdings, wenn ich Clearfix verwende, überfülle ich versteckt. Kann es ohne js überhaupt gemacht werden? – tolborg

+0

Dies kann und sollte ohne js erfolgen. Eine Menge Probleme hier, aber hier sind die wichtigsten: die: vor und nach der für die bg-Farbe sollte auf der tatsächlichen div sein, die diese bg-Farbe hat. Verwenden Sie in diesem Fall das: before of .content-main und das: after of .content-side. Der Clearfix sollte auf den Container div angewendet werden, der in diesem Fall .content ist. – DMTintner

Verwandte Themen