flex,如何頭部固定，左側(cè)固定100%高，右側(cè)上下滾動，如下圖代碼

問題

1.左側(cè)除去頭部高度，高度100%,豎直排列等比劃分，
2.右側(cè)豎直上下滾動，左右不可以滾動

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            left: 0;
        }
        body{
            padding-top: 50px;
        }
        .header{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: red;
            z-index: 10001;
        }
        .layout{
            display: flex;
        }
        .layout .layout-left{
            flex: 0 0 200px;
            flex-direction:column;
            width: 200px;
            color: #fff;
            background-color: blue;
        }
        .layout .layout-right{
            flex: 1;
            background-color: yellow;
        }
    </style>
</head>
<body>
<header class="header">頭部</header>
<section class="layout">
    <div class="layout-left">
        <div class="left-item">
            <img src="images/nav1.png" alt="nav"/>
            <p>導(dǎo)航1</p>
        </div>
        <div class="left-item">
            <img src="images/nav1.png" alt="nav"/>
            <p>導(dǎo)航1</p>
        </div>
        <div class="left-item">
            <img src="images/nav1.png" alt="nav"/>
            <p>導(dǎo)航1</p>
        </div>
        <div class="left-item">
            <img src="images/nav1.png" alt="nav"/>
            <p>導(dǎo)航1</p>
        </div>
        <div class="left-item">
            <img src="images/nav1.png" alt="nav"/>
            <p>導(dǎo)航1</p>
        </div>
        <div class="left-item">
            <img src="images/nav1.png" alt="nav"/>
            <p>導(dǎo)航1</p>
        </div>
    </div>
    <div class="layout-right">
        我是內(nèi)容 
    </div>
</section>
</body>
</html>

回答

編輯回答

涼汐

        *{
            padding: 0;
            left: 0;
        }
        body{
            padding-top: 50px;
        }
        .header{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: red;
            z-index: 10001;
        }
        .layout{
            display: flex;
            position: relative;
        }
        .layout .layout-left{
            flex: 0 0 200px;
            flex-direction:column;
            width: 200px;
            color: #fff;
            background-color: blue;
        }
        .layout .layout-right {
          background-color: yellow;
          overflow-y: auto;
          overflow-x: hidden;
          position: absolute;
          left:215px;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto;
      }

2017年6月10日 04:18

編輯回答

離人歸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
       #content{
           position: relative;
       }
       #header{
           height: 80px;
           background: #00d6b2;
           text-align: center;
       }
       #left{
           position: absolute;
           top: 80px;
           left: 0;
           width: 150px;
           background: #0b5e4e;
       }
       #right{
            margin-left: 150px;
           background: #0b97c4;
       }

        .fixedLeft{
            position:fixed !important;
            top: 0 !important;
        }

    </style>
</head>
<body>

    <div id="content">

        <div id="header"> header 部分</div>

        <div id="left"> left 部分<br>left 部分...</div>

        <div id="right">  right 部分<br>right 部分...</div>

    </div>


    <script src="jquery.js"></script>
    <script>
        fixedToTop("left", "fixedLeft");
        function fixedToTop(elementId, fixedClass) {
            if ($("#" + elementId).length > 0) {
                var eleOffsetTop = $("#" + elementId).offset().top;
                $(window).scroll(function () {
                    var documentScrollTop = $(document).scrollTop();
                    if (documentScrollTop >= eleOffsetTop) {
                        $("#" + elementId).addClass(fixedClass);
                    } else {
                        $("#" + elementId).removeClass(fixedClass);
                    }
                });
            }

        }
    </script>
</body>
</html>

2017年7月30日 04:35