鍍金池/ 問答/HTML/ css布局問題

css布局問題

clipboard.png

有以上html結(jié)構(gòu)，header占滿整個屏幕的寬度，left寬度固定200px,right內(nèi)容是由iframe寬度占滿剩余的寬度，并且content的高度占滿整個屏幕，怎么使用css布局實(shí)現(xiàn)上面的結(jié)構(gòu)？

回答
編輯回答
孤酒
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body {
      height: 100vh;
      margin: 0;
      padding: 0;
    }
    .header {
      height: 60px;
      background: #ffbf00;
    }
    .content {
      display: flex;
      height: calc(100% - 60px);
      background: #0c86ff;
    }
    .left {
      width: 300px;
      background: #00a854;
    }
    .right {
      width: calc(100% - 300px);
      background: red;
    }
  </style>
</head>
<body>
  <div class="header"></div>
  <div class="content">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

圖片描述

2018年9月5日 09:49
編輯回答
凝雅
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            header{
                background: lightcoral;
                height: 100px;
            }
            .content{
                position: absolute;
                left: 0px;
                right: 0px;
                top: 100px;
                bottom: 0px;
            }
            .left{
                width: 200px;
                background: lightskyblue;
                position: absolute;
                top: 0;
                bottom: 0;
            }
            .right{
                left: 200px;
                right: 0px;
                background: orange;
                position: absolute;
                top: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <header></header>
        <div class="content">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>
2017年7月8日 04:29