<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高度自适应</title> <style> *{ margin: 0; padding: 0; } .main{ width: 100%; background-color: pink; position: relative; } .main:after{display:block;content: "";visibility: hidden;clear: both;} .main div{ float: left; width: calc((100vw - 24px)/3); position: relative; padding-top: 35%; margin-right: 8px; border:1px black solid; border-radius: 10px; box-sizing: border-box; } .main div:nth-child(1){ background: url(images/1.jpg) no-repeat; background-size: cover; } .main div:nth-child(2){ background: url(images/2.jpg) no-repeat; background-size: cover; } .main div:nth-child(3){ background: url(images/3.jpg) no-repeat; background-size: cover; } .p1{ position: absolute; height: 100%; width: 100%; left: 0; right: 0; top: 0; bottom: 0; background-color: red; overflow: hidden; } </style></head><body> <div class="main"> <div><p class="p1">图中三个DIV的宽高都会随着页面的大小放弃原有比例放大或放大。其核心思想就是利用padding来拓宽盒子高度。通过padding-top来设置百分比，使其百分比与宽度的百分比为须要的比例。这里须要留神的是：padding-top中设置的百分比与width中设置的百分比都是以父元素的width为参考的</p></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div></body></html>