Sidebar mit Hintergrund Flüssigkeit zum Rand des Fensters

Question

Dieses Duplikat löste nicht, weil ich JS nicht verwenden möchte. CSS: Sidebar fixed width with background to edge of window

Das ist, was ich versuche zu erreichen:

Grundsätzlich ist der gesamte Inhalt in einem div mit einer bestimmten Breite und setzte mit margin: 0 auto zum Zentrum sein muss. Innerhalb dieses div muss ein main div mit einem weißen Hintergrund und ein sidebar mit einem blauen Hintergrund sein.

Ich möchte Javascript nicht verwenden. Ist das nicht mit reinem CSS möglich?

CURRENT CODE (nicht funktioniert): https://jsfiddle.net/0p9jrnq1/1/

Answer 1

dies mit mit festen tun scheint für mich Art von hart. Wenn Sie mit Prozentsätzen umgehen können, funktioniert das. Alles, was Sie dazu hinzufügen müssen, ist die Verwendung von Medienabfragen, um die Größe zu reduzieren oder die linken und rechten Rinnen auszublenden, wenn Sie dieses Layout in kleineren Bildschirmen betrachten.

HTML:

<div class="container"> 
    <div class="left-gutter"></div> 
    <div class='content'> 
     <div class="main"> </div> 
     <div class="sidebar"> </div> 
    </div> 
    <div class="right-gutter"> 
</div> 

CSS:

.container { 
    width:100%; 
} 

.container > .left-gutter, .container > .right-gutter { 
    width:20%; 
} 

.container > .left-gutter { 
    height:100%; 
    float:left; 
} 

.container > .right-gutter { 
    height:100%; 
    background: #0000FF; 
    float:right; 
} 

.container > .content { 
    width: 60%; 
    height:100%; 
    float:left; 
    min-width: 200px;/*Your minimum fixed width here*/ 
} 

.container > .content > .main { 
    width: 80%; /*Width for the content area in %*/ 
    float: left; 
    height:100%; 
    background:#FFFFFF; 
} 
.container > .content > .sidebar { 
    width: 20%; /*Width for the sidebar area in %*/ 
    float: right; 
    height:100%; 
    background:#0000FF; 
} 

Stellen Sie sicher, Breite Prozent der Haupt- und Seitenleiste hinzufügen, bis zu 100%

Mit Polsterung und Margen sein erfordert Sie können die Breite der Elemente entsprechend anpassen.

Answer 2

Werfen Sie einen Blick auf dieses Layout

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#header { 
 
    background-color: #02CC02; 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
#header .clearfix { 
 
    padding: 40px; 
 
} 
 

 
#main-content { 
 
    background-color: white; 
 
} 
 

 
.page-content { 
 
    margin: 0 auto; 
 
    width: 55%; 
 
} 
 

 
#sidebar { 
 
    background-color: rgba(238, 130, 238, 0.92); 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    width: 300px; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 

 
#sidebar .clearfix { 
 
    padding: 60px; 
 
}

<div id="header"> 
 
    <div class="clearfix"></div> 
 
</div> 
 
<div id="main-content"> 
 
    <div class="page-content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor blandit mauris, vel ornare metus cursus eu. Maecenas faucibus nisl non mauris sagittis, at porttitor lorem vestibulum. Curabitur vulputate facilisis nunc nec imperdiet. Sed finibus risus eu quam bibendum, imperdiet commodo felis condimentum. Morbi dapibus, libero eu malesuada sagittis, justo urna ullamcorper odio, a venenatis orci turpis ac nisi. Ut porta commodo nibh, at auctor nisi dapibus sit amet. Nullam tincidunt urna at nisi finibus dictum.</p> 
 
     <p>Duis orci purus, varius vel dolor a, pharetra mattis ipsum. Duis aliquam velit sed ex consequat pretium. Donec eleifend mattis elit, sit amet accumsan diam sodales id. Nulla sed sem nisl. Sed mattis nunc massa, eget ultrices ex luctus sit amet. Curabitur porttitor turpis non tortor venenatis, at blandit dui elementum. Proin vehicula, augue ac tempor euismod, erat quam iaculis velit, a bibendum erat sapien sed dolor. Proin sed augue convallis, molestie sem id, finibus ante. Ut in tincidunt ligula, non rutrum tortor. Cras eu ex eleifend, volutpat nibh at, faucibus nunc. Nam eget augue porta, congue tellus id, viverra turpis. Curabitur quis felis ligula. Phasellus lacus erat, molestie eget sapien quis, luctus feugiat mi. Nam tristique, sem eget aliquam interdum, ligula neque malesuada diam, vitae rhoncus elit est eu arcu.</p> 
 
     <p>Etiam finibus purus mattis, elementum nibh sit amet, eleifend nulla. Duis tortor eros, bibendum eget mattis nec, feugiat quis sem. Curabitur consequat urna in turpis facilisis maximus. Nulla elementum molestie ligula. Vestibulum eleifend fermentum quam ut sagittis. Integer nunc tortor, condimentum et posuere vel, vestibulum quis leo. Ut feugiat vehicula arcu, laoreet vehicula mi rutrum vitae.</p> 
 
     <p>In venenatis, erat eu interdum ornare, leo magna eleifend elit, vitae fermentum metus dui vel quam. Vivamus auctor lacinia porta. Nullam vitae vestibulum libero. Quisque tincidunt pellentesque metus, sit amet pharetra est mattis quis. Sed mattis, nisl a interdum porttitor, velit ligula lacinia orci, sed hendrerit augue dolor vel nisi. Aliquam ut ex vitae nunc aliquam aliquam et in mi. Phasellus sit amet ante quis ipsum cursus volutpat eget eget lectus. Curabitur tempor sed odio id pulvinar. Suspendisse sed elit egestas, lobortis est id, aliquet urna. Mauris ac purus at justo condimentum rutrum non eget libero. Quisque scelerisque erat sed orci consequat suscipit. Quisque sit amet dui hendrerit, commodo arcu quis, tristique quam. Phasellus feugiat nulla velit, nec condimentum nisl varius eget. Mauris facilisis et arcu vitae ultrices. Vivamus viverra, lorem vitae eleifend vulputate, neque sem volutpat ante, eget rhoncus erat nisl ac turpis.</p> 
 
    </div> 
 
</div> 
 
<div id="sidebar"> 
 
    <div class="clearfix"></div> 
 
</div>

Verwenden JS der Sidebar

Answer 3

Versuchen Sie, diese zu zeigen und verstecken ..

.sidebar { 
position: static; 
} 
.sidebar:after { 
content: ""; 
position: absolute; 
right: 0; 
top: 0; 
bottom: 0; 
width: 22%; (adjust till get the right width) 
height: 100%; 
bacgkround: (the sidebar background); 
z-index: (below sidebar); 
}