html css レイアウト基本 - everydayProguramming

基本レイアウト

f:id:everydayProguramming:20200705150356p:plain

実装

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
   <div class="wrapper">
     <div class="header">

     </div>
     <div class="main">
       <div class="left">

       </div>
       <div class="right">
       </div>
     </div>
     <div class="footer">

     </div>
   </div>
    
  </body>
</html>

body {
  margin: 0;
}
.header{
  width: 100%;
  height: 100px;
  background-color: black;
}

.main {
  display: flex;

}

.left{
  flex: 1;
  background-color: yellow;
  height: 100vw;
}

.right{
  flex: 2;
  background-color: green;
  height: 100vw;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: pink;
}