为什么`vw`和`vh`不能正确缩放?

I'm making a frame. The <div> has a width of 90vw and a height of 90vh. Why isn't the div scaling properly when I resize the window?

码:

<style>
  body {
    padding: 0px;
  }
  
  #frame {
    border-top: 8px solid orange;
    border-left: 16px solid orange;
    border-bottom: 8px solid orange;
    border-right: 1px solid white;
    border-radius: 8px;
    width: 90vw;
    height: 90vh;
    padding: 16px;
  }
</style>

<div id="frame">
  <div id="content">

  </div>
</div>
评论
记得忘记
记得忘记

You should add box-sizing: border-box; for everything (*) to include the borders and the padding in width and height calculation, and use margin: 0 instead of padding: 0 for the body

* {
  box-sizing: border-box;
}
  body {
    margin: 0px;
  }
  
  #frame {
    border-top: 8px solid orange;
    border-left: 16px solid orange;
    border-bottom: 8px solid orange;
    border-right: 1px solid white;
    border-radius: 8px;
    width: 90vw;
    height: 90vh;
    padding: 16px;
  }
<div id="frame">
  <div id="content">

  </div>
</div>
点赞
评论