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

Question

如何设置

的width属性，使其始终为浏览器窗口宽度的百分比？例如：

• 当浏览器窗口宽度为1920px时，
  的宽度为1536px（80%）
• 当浏览器窗口宽度为1600px时，
  的宽度为1280px（80%）

要实现这个效果，可以使用CSS中的百分比单位。将

的width属性设置为80%，就可以让它始终是浏览器窗口宽度的80%。例如：

div { width: 80%; }

- Chin

Answer 1

你应该使用一个包装 div 并将其设置为浏览器宽度的 100%，然后放置所需的 div 并将其设置为 width:80%。这样可以使你的所需的 div 居中。(使用 margin:0 auto 实现.) 这里有一个带演示的 JSFiddle: http://jsfiddle.net/6Lwpr/

- Shrey Gupta

---

那我怎么才能做到100%呢？ - Chin

抱歉，我忘记附上JSFiddle了。您需要将所需的div作为“wrapper” div的子元素，并设置“width：100％;”。因此，您最终会得到这个：<div id="wrapper" style="width:100%;"><div id="desired" style="width:80%;"></div></div> - Shrey Gupta

Answer 2

vw：相对于视窗宽度的1％

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

- user3365957

Answer 3

使用这个

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

margin-right:auto;


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

margin-right:auto;

}

- Pawan Lakhara

---

我尝试过了，但是我无法根据浏览器的宽度/高度自动设置div的宽度/高度：https://codepen.io/spike321/pen/LYVqavZ - Awesome_girl