ダブルウイング/聖杯レイアウト

html

<section>
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>
</section>

CSS

1. 位置決め

*{
    
    
     margin: 0;
     padding: 0;
 }
 section{
    
    
     position: relative;
 }
 .left{
    
    
     position: absolute;
     left: 0;
     top: 0;
     width: 200px;
     height: 100vh;
     background-color: #aff;
 }

 .content{
    
    
     margin-left: 200px;
     height: 100vh;
     background-color: #faf;
 }
 .right{
    
    
     position: absolute;
     right: 0;
     top: 0;
     width: 200px;
     height: 100vh;
     background-color: #ffa;
 }

2、フレックス

* {
    
    
    margin: 0;
    padding: 0;
}

section {
    
    
    display: flex;
}

.left {
    
    
    width: 200px;
    height: 100vh;
    background-color: #aff;
}

.content {
    
    
    flex: 1;
    height: 100vh;
    background-color: #faf;
}

.right {
    
    
    width: 200px;
    height: 100vh;
    background-color: #ffa;
}

3、計算()

* {
    
    
    margin: 0;
    padding: 0;
}

section {
    
    
    overflow: hidden;
}

.left {
    
    
    float: left;
    width: 200px;
    height: 100ch;
    background-color: #aff;
}

.content {
    
    
    float: left;
    width: calc(100% - 400px);
    height: 100ch;
    background-color: #faf;
}
.right{
    
    
    float: left;
    width: 200px;
    height: 100ch;
    background-color: #ffa;
}