一、自适应高度
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>
