側邊欄與背景流體到窗口邊緣

Question

這個重複沒有解決，因爲我不想使用JS。 CSS: Sidebar fixed width with background to edge of window

這就是我想要實現：

基本上所有的內容必須與特定寬度的DIV中，並設置與margin: 0 auto中心。在這個div裏面，必須有一個白色背景的main div和一個藍色背景的sidebar。

我不想使用JavaScript。純粹的CSS不可能嗎？

當前的代碼（不工作）：https://jsfiddle.net/0p9jrnq1/1/

Answer 1

與固定這樣做似乎有點艱難的我。如果你可以用百分比做，那麼這個工作。您只需添加媒體查詢即可在較小的屏幕中查看此佈局時縮小尺寸或隱藏左側和右側排水溝。

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; 
} 

做的主，側欄一定寬度百分比加起來是100％

使用填充和利潤要求您可以相應地調整元素的寬度。

Answer 2

看看這個佈局

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>

使用JS來顯示和隱藏側邊欄

Answer 3

試試這個..

.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); 
}