htmlページを2つの静的divと1つのスクロール可能divに分割する方法は？

私のHTMLページをCSSを使って縦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に分割する方法は？

答えて

関連する問題