如何將html頁面分成2個靜態div和1個可滾動div？

我需要使用css將我的html頁面分成3列（左，中，右）。左側和右側應該是靜態的（不可滾動的）並且適合瀏覽器高度。中心div應該適合內容和滾動條。如下圖所示。我怎麼可以通過CSS來做到這一點？如何將html頁面分成2個靜態div和1個可滾動div？

HTML代碼：

<body> 
     <div id="wrapper"> 
     <div id="left" >First</div> 
     <div id="center" >Second</div> 
     <div id="right" >Third</div> 
     </div> 
    </body>

CSS代碼：

body{ 
    width: 100%; 
    height:100%; 
} 

#wrapper{ 
    width: 100%; 
    background-color:pink; 
    display: flex; 
} 

#left{ 
    flex: 1;  
    background-color:#F6070B; 
} 

#center { 
    flex: 3; 
    background-color: #0622F4; 
} 

#right{ 
    flex: 1; 
    background-color: #FAF000; 
}

來源

2016-09-24 F. Fo

你想在哪裏滾動條出現在中間面板，在中間面板的右側或窗口本身？ –

試試這個代碼，完美的工作。

CSS文件

#wrapper{ 

    background-color:pink; 
    display: flex; 
} 

#left{ 
    flex: 1; 
    left:0; 
    width:150px;  
    background-color:#F6070B; 
    height:100vh; 
    position:fixed; 
    top:0; 
} 

#center { 
    margin-left:180px; 
    margin-right: 180px; 
    flex: 3; 
    background-color: lightblue; 

} 

#right{ 
    width:150px; 
    right:0; 
    height:100vh; 
    position:fixed; 
    top:0; 
    background-color: #FAF000; 
}

HTML代碼

<body> 
     <div id="wrapper"> 
     <div id="left" >First</div> 
     <div id="center" > 
     <script> 
     for(i=0; i< 100; i++){ 
     document.write("Dummy Text<br/>"); 
     } 
     </script> 
     </div> 
     <div id="right" >Third</div> 
     </div> 
    </body>

來源

2016-09-24 23:37:10 Sunny

如何將html頁面分成2個靜態div和1個可滾動div？

回答

相關問題