【Css】移动端用flex实现DIV高度自适应屏幕和带滚动条效果（代码示例）

原创已于 2022-10-14 14:55:33 修改 · 3.7k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端 #html

于 2022-01-10 10:45:58 首次发布

5.【css】同时被 2 个专栏收录

85 篇文章

订阅专栏

4.【html】

83 篇文章

订阅专栏

本文介绍如何使用CSS实现自适应高度及滚动条设置，包括利用vh/vw单位进行页面元素的自适应调整，并通过实例展示了如何在不同的场景下实现水平和垂直滚动条。

一、自适应高度

vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;

calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

  .card_1 {
    width: 100%;
    height: calc(100vh - 320px);
  }

二、滚动条设置

  .big_div {
    width: 100%;
    overflow-x: hidden; /*x轴禁止滚动*/
    overflow-y: scroll; /*y轴滚动*/
    height:height: calc(100vh - 320px);
  }
  .big_div::-webkit-scrollbar {
    display: none;/*隐藏滚动条*/
  }

三、div自适应，还能实现滚动条实例（垂直）

<html>

<head>
    <title>div自适应，还能实现滚动条实例</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>


<style>
    .box {
        height: 500px;
        width: 350px;
        background-color: rgb(253, 242, 242);
        display: flex;
        flex-direction: column;
        border-bottom: 3px rgb(206, 11, 190) solid;
    }

    .box_1 {
        width: 300px;
        height: auto;
        background-color: rgb(230, 238, 248);
        border-bottom: 1px red solid;
    }

    .box_2 {
        width: 300px;
        height: 100%;
        background-color: rgb(212, 248, 217);
        border-bottom: 1px rgb(229, 248, 192) solid;
        overflow-x: hidden; /*x轴禁止滚动*/
    overflow-y: scroll; /*y轴滚动*/
    }
</style>

<body>

    <div class="box">
        <div class="box_1">
            <h1>1</h1>
            <h1>2</h1>
            <h1>3</h1>
            <h1>4</h1>
        </div>

        <div class="box_2">
            <h1>A</h1>
            <h1>B</h1>
            <h1>C</h1>
            <h1>8</h1>
            <h1>9</h1>
        </div>
    </div>
</body>

</html>

四、div自适应，还能实现滚动条实例（水平）

<html>

<head>
    <title>div自适应，还能实现滚动条实例</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>


<style>
    .box {
        height: 200px;
        width: 350px;
        background-color: rgb(253, 242, 242);
        display: flex;
        flex-direction: row;
        justify-content:flex-start;
        border-bottom: 3px rgb(206, 11, 190) solid;
        
    }

    .box_1 {
        /* width: 100px; */
        width:auto;
        /* flex-grow: 1; */
        /* flex:auto; */
        height:40px;
        background-color: rgb(230, 238, 248);
        border-bottom: 1px red solid;
        flex-shrink:1;
        border-right: 1px red solid;
    }

    .box_2 {
        /* flex:auto; */
        width:0;
        flex-grow: 5;
        height: 40px;
        background-color: rgb(212, 248, 217);
        border-bottom: 1px rgb(229, 248, 192) solid;
    }
</style>

<body>

    <div class="box">
        <div class="box_1">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>0</span>
        </div>

        <div class="box_2">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>8</span>
            <span>9</span>
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>8</span>
            <span>9</span>
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>8</span>
            <span>9</span>
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>8</span>
            <span>9</span>
        </div>
    </div>
</body>

</html>