Make verschachtelte Kind Element in voller Breite

Question

Ich möchte Markup-Struktur beibehalten und verschachtelte Kindelement gehen Vollbildbreite haben unterschiedliche Hintergrundfarbe.

HTML example can be seen here (fiddle)

li { 
 
    float: left; 
 
    width: 50%; 
 
    outline: 1px solid pink 
 
} 
 

 
.section-bg-color { 
 
    display: inline-block; 
 
    background-color: gray; 
 
} 
 

 
.page-bg-color { 
 
    background-color: yellow; 
 
}

<div class="page-bg-color"> 
 
    <div class="section-bg-color"> 
 
    <ul class="addon-list"> 
 
     <li> 
 
     <div class="header">1 Headline</div> 
 
     <div class="hidden-content" id="1" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">2 Headline</div> 
 
     <div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">3 Headline</div> 
 
     <div class="hidden-content" id="3" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">4 Headline</div> 
 
     <div class="hidden-content" id="4" style="display: none;">Hidden content</div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Das ist, was ich habe:

Gewünschtes Ergebnis:

Answer 1

Die einzige Möglichkeit, Ihre ausgeblendeten divs über die gesamte Breite zu strecken, besteht darin, sie absolut zu positionieren. Sie funktioniert nur, wenn keiner der übergeordneten Elemente bis zur Seite div positioniert ist. Zusammen mit diesem nehme ich an, dass Sie js verwenden, um diese divs zu verstecken/zu zeigen. Wenn Sie also das div anzeigen, müssen Sie dem enthaltenen li einen unteren Rand hinzufügen, um Platz für den versteckten Inhalt zu schaffen.

Hier ist eine schnelle Mockup von dem, was ich meine:

$('.header').hover(function() { 
 
    var title = $(this), 
 
     content = $(this).next(); 
 
     
 
    content.show(); 
 
    title.parent().css('margin-bottom', content.outerHeight()); 
 
}, 
 
function() { 
 
    var title = $(this), 
 
     content = $(this).next(); 
 
     
 
    content.hide(); 
 
    title.parent().css('margin-bottom', 0); 
 

 
});

li { 
 
    float: left; 
 
    width: 50%; 
 
    outline: 1px solid pink 
 
} 
 
li:nth-child(odd) { 
 
    clear:left; 
 
} 
 
.section-bg-color { 
 
    width:50%; 
 
    display:inline-block; 
 
    background-color: gray; 
 
} 
 

 
.page-bg-color { 
 
    background-color: yellow; 
 
    position:relative; 
 
} 
 

 
.hidden-content { 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    background:lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page-bg-color"> 
 

 

 
<div class="section-bg-color"> 
 
<ul class="addon-list"> 
 
    <li> 
 
    <div class="header">1 Headline</div> 
 
    <div class="hidden-content" id="1" style="display: none;">Hidden content 1</div> 
 
    </li> 
 
    <li> 
 
    <div class="header">2 Headline</div> 
 
    <div class="hidden-content" id="2" style="display: none;">Hidden content is shown</div> 
 
    </li> 
 
    <li> 
 
    <div class="header">3 Headline</div> 
 
    <div class="hidden-content" id="3" style="display: none;">Hidden content 3</div> 
 
    </li> 
 
    <li> 
 
    <div class="header">4 Headline</div> 
 
    <div class="hidden-content" id="4" style="display: none;">Hidden content 4</div> 
 
    </li> 
 
</ul> 
 
</div> 
 
</div>

Updated fiddle

Answer 2

Versuchen:

li { 
    float: left; 
    width: 50%; 
    outline: 1px solid pink 
} 

.section-bg-color { 
    //display:inline-block; 
    background-color: gray; 
} 

.page-bg-color { 
    background-color: yellow; 
    padding: 5px 10px; 
} 

.addon-list { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Answer 3

li { 
 
    float: left; 
 
    width: 50%; 
 
    outline: 1px solid pink 
 
} 
 

 
.section-bg-color { 
 
    display: block; 
 
    background-color: gray; 
 
} 
 

 
.page-bg-color { 
 
    background-color: yellow; 
 
} 
 

 
.clr { 
 
    clear: both; 
 
}

<div class="page-bg-color"> 
 

 

 
    <div class="section-bg-color"> 
 
    <ul class="addon-list"> 
 
     <li> 
 
     <div class="header">1 Headline</div> 
 
     <div class="hidden-content" id="1" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">2 Headline</div> 
 
     <div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">3 Headline</div> 
 
     <div class="hidden-content" id="3" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">4 Headline</div> 
 
     <div class="hidden-content" id="4" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <div class="clr"></div> 
 

 
    </ul> 
 
    </div> 
 
</div>

Fiedler Link ist https://jsfiddle.net/e3sngy3s/8/

Answer 4

Es ist hässlich, aber man kann mit negativen margin und viewport Einheiten etwas tun ..

Ich habe eine pseudoelement verwendet, um es auf die linke Kante zu strecken.

fiddle

body { 
 
    margin: 0; 
 
} 
 

 
li { 
 
    float: left; 
 
    width: 50%; 
 
    outline: 1px solid pink 
 
} 
 

 
.section-bg-color { 
 
    display: inline-block; 
 
    background-color: gray; 
 
} 
 

 
.page-bg-color { 
 
    background-color: yellow; 
 
} 
 

 
.hidden-content { 
 
    width: calc(100vw - 40px); 
 
    margin-left: -100%; 
 
    background: orange; 
 
    padding: 2% 0%; 
 
    position: relative; 
 
} 
 

 
.hidden-content:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: orange; 
 
    width: 3em; 
 
    margin-left: -3em; 
 
}

<div class="page-bg-color"> 
 
    <div class="section-bg-color"> 
 
    <ul class="addon-list"> 
 
     <li> 
 
     <div class="header">1 Headline</div> 
 
     <div class="hidden-content" id="1" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">2 Headline</div> 
 
     <div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">3 Headline</div> 
 
     <div class="hidden-content" id="3" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">4 Headline</div> 
 
     <div class="hidden-content" id="4" style="display: none;">Hidden content</div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

EDIT

Um diese Arbeit für alle versteckten divs machen Sie den nth-of-type Selektor auf das Listenelement verwenden können.

fiddle

Answer 5

Versuchen Zugabe

.yourSelectorForDesiredContent { 
    margin-left: -100%; 
    background-color: yourColourCode; 
} 

dass es für Sie über den Bildschirm ziehen sollte. Nicht der schönste Weg, aber sollte das gewünschte Ergebnis erzielen.