Home > Article > Web Front-end > CSS: three-column layout, fixed on both sides, adaptive in the middle_html/css_WEB-ITnose
I was asked a layout question during an interview:
Three-column layout, fixed on both sides, adaptive in the middle
The answer given at that time was that the left and right sides floated left respectively. And right, middle adaptive, and then set a margin. It can be regarded as achieving the effect.
<style type="text/css"> *{margin:0;padding:0;} .left{float:left;width:300px;background:red;height:500px;} .right{float:right;width:300px;background:red;height:500px;} .center{margin:0 230px;background:blue;}</style><div class="left">left</div><div class="right">right</div><div class="center">center</div>
Note: The middle column must be placed at the bottom
I found another way to implement positioning on the Internet. The left and right are set to fixed positioning, and the middle is adaptive.
<style type="text/css"> html,body{margin:0;padding:0;height:100%;} .left,.right{ position:absolute; top:0; width:300px; height:100%; background-color:blue; } .left{ left:0; } .right{ right:0; } .center{ margin:0 230px; height:100%; color:#f90; background:red; }</style>
There are also interview questions like this: for example, fixed in the middle, adaptive on both sides; fixed on the left, adaptive on the right, etc. I'll study it when I have time.