鍍金池/ 問答/Java  PHP  Python  HTML/ flex垂直布局，如何除去固定部分，剩下部分等比劃分，如下圖代碼

flex垂直布局，如何除去固定部分，剩下部分等比劃分，如下圖代碼

首先道個謝

問題說明

  1. 頭部固定，左側(cè)固定，右側(cè)可以上下滾動，并且右側(cè)上下滾動不影響左側(cè)導(dǎo)航
  2. 如何實現(xiàn) 除去頭部高度后，剩下的藍色左側(cè)高度等比劃分

圖片

圖片描述

代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: red;
        }
        .nav{
            position: fixed;
            top: 100px;
            width: 200px;
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: #00aaee;
        }
        .nav-item{
            flex: 1;
            border-bottom: 1px solid #ccc;
        }
        .main{
            margin-top: 100px;
            margin-left: 200px;
        }
        .main-item{
            height: 100px;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div class="header">頭部</div>
<div class="nav">
    <div class="nav-item">nav1</div>
    <div class="nav-item">nav2</div>
    <div class="nav-item">nav3</div>
    <div class="nav-item">nav4</div>
    <div class="nav-item">nav5</div>
</div>
<div class="main">
    <div class="main-item">main1</div>
    <div class="main-item">main2</div>
    <div class="main-item">main3</div>
    <div class="main-item">main4</div>
    <div class="main-item">main5</div>
    <div class="main-item">main6</div>
    <div class="main-item">main6</div>
    <div class="main-item">main6</div>
    <div class="main-item">main6</div>
    <div class="main-item">main6</div>
    <div class="main-item">main6</div>
    <div class="main-item">main6</div>
</div>
</body>
</html>
回答
編輯回答
墻頭草

其實等分了 不過你設(shè)置了100%高度又top：100px;這樣會有100px超出隱藏
解決辦法高度也要減去100px
可以用css3的height: calc(100% - 100px);
也可以用js設(shè)置

2018年4月14日 04:17