Skip to content

Instantly share code, notes, and snippets.

@wangbinyq

wangbinyq/example.html

Last active September 29, 2018 03:55
Show Gist options
  • Save wangbinyq/b40ce6491a8cafa33672d682df623e0d to your computer and use it in GitHub Desktop.
Save wangbinyq/b40ce6491a8cafa33672d682df623e0d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wangbinyq revised this gist Sep 29, 2018. 1 changed file with 8 additions and 45 deletions.
    53 changes: 8 additions & 45 deletions example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,16 +6,16 @@
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex example</title>
    <link href="https://cdn.bootcss.com/basscss/8.0.4/css/basscss.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <style>
    html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    }

    .full {
    height: 100vh;
    width: 100vw;
    height: 100%;
    width: 100%;
    }

    .red {
    @@ -29,52 +29,15 @@
    .blue {
    background: rgba(0, 0, 255, 0.2);
    }

    .top1-conten {
    flex: 1;
    overflow: auto;
    }

    .fuild1 {
    flex: 1;
    padding: 20px;
    overflow: auto;
    }

    .fuild1-content {
    background: #66339922;
    }

    .bottom1 {
    height: 100px;
    }
    </style>
    </head>
    <body>
    <div class="app full flex flex-column">
    <div class="top1 red" :class="topheightFlex ? 'flex flex-column' :''">
    <input type="number" v-model.number="topheight">
    <input type="checkbox" v-model="topheightFlex">
    <div class="top1-content" :style="{height: topheight + 'px'}">
    </div>
    </div>
    <div class="fuild1 blue flex flex-column">
    <div class="fuild1-content">
    <div class="fuild1-content-list" :style="{height: listHeight + 'px'}"></div>
    </div>
    <input type="number" v-model.number="listHeight">
    <div class="full flex flex-column">
    <div class="red" style="height: 200px"></div>
    <div class="blue" style="overflow: auto; flex: 1">
    <div style="height: 2000px;"></div>
    </div>
    <div class="bottom1 green"></div>
    <div class="green" style="height: 200px;"></div>
    </div>
    <script>
    const vm = new Vue({
    el: '.app',
    data: {
    topheightFlex: false,
    topheight: 100,
    listHeight: 2000,
    }
    })
    </script>
    </body>
    </html>
  2. wangbinyq created this gist Sep 29, 2018.
    80 changes: 80 additions & 0 deletions example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex example</title>
    <link href="https://cdn.bootcss.com/basscss/8.0.4/css/basscss.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <style>
    html, body {
    padding: 0;
    margin: 0;
    }

    .full {
    height: 100vh;
    width: 100vw;
    }

    .red {
    background: rgba(255, 0, 0, 0.2);
    }

    .green {
    background: rgba(0, 255, 0, 0.2);
    }

    .blue {
    background: rgba(0, 0, 255, 0.2);
    }

    .top1-conten {
    flex: 1;
    overflow: auto;
    }

    .fuild1 {
    flex: 1;
    padding: 20px;
    overflow: auto;
    }

    .fuild1-content {
    background: #66339922;
    }

    .bottom1 {
    height: 100px;
    }
    </style>
    </head>
    <body>
    <div class="app full flex flex-column">
    <div class="top1 red" :class="topheightFlex ? 'flex flex-column' :''">
    <input type="number" v-model.number="topheight">
    <input type="checkbox" v-model="topheightFlex">
    <div class="top1-content" :style="{height: topheight + 'px'}">
    </div>
    </div>
    <div class="fuild1 blue flex flex-column">
    <div class="fuild1-content">
    <div class="fuild1-content-list" :style="{height: listHeight + 'px'}"></div>
    </div>
    <input type="number" v-model.number="listHeight">
    </div>
    <div class="bottom1 green"></div>
    </div>
    <script>
    const vm = new Vue({
    el: '.app',
    data: {
    topheightFlex: false,
    topheight: 100,
    listHeight: 2000,
    }
    })
    </script>
    </body>
    </html>