Question

我需要使用css将我的html页面划分为3个垂直列（左，中，右）。左侧和右侧应该是静态的（不可滚动）并且适合浏览器高度。中心div应该适合内容和可滚动。如下图所示。我怎么能用css做到这一点？

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

Answer 1

尝试使用此代码，完美运行。

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 CODE

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

如何将html页面划分为2个静态div和1个可滚动div？

1 个答案: