css - 将 div 的宽度设置为相对于浏览器窗口的宽度

Question

如何设置widtha 的属性div，使其始终是浏览器窗口宽度的百分比？

例如，

• 当浏览器窗口宽度为 1920px 时，其div宽度为 1536px (80%)
• 当浏览器窗口宽度为 1600px 时，其div宽度为 1280px (80%)

等等？

Answer 1

您应该使用包装器 div 并将其设置为等于浏览器宽度的 100%，然后放置所需的 div 并将其设置为width:80%. 这也将允许您将所需的 div 居中。（margin:0 auto用于此。）

这是一个带有演示的 JSFiddle：http: //jsfiddle.net/6Lwpr/

Answer 2

vw：相对于视口宽度的 1%

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

Answer 3

用这个

.main
{width:100%;
margin-left:auto; 

margin-right:auto;


}
.content
{
width:80%;
margin-left:auto; 

margin-right:auto;

}