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

Question

如何设置width的{​​{1}}属性，使其始终占浏览器窗口宽度的百分比？

例如，

• 当浏览器窗口的宽度为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％

GmusicFS

Answer 3

使用此

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

margin-right:auto;


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

margin-right:auto;

}