Question

我有一个textarea，我希望它在屏幕的左边，但是有一点点差距。所以我以为我设定了高度：98％;宽度：48％;然后保证金：1％1％1％1％;但是，高度超过98％（它在屏幕外），并且在所有主流浏览器中都是相同的（chrome，opera，firefox，IE和safari，所有最新版本）。但是，在chrome中打开调试控制台会更改textarea的高度，即使它（调试控制台）仅影响屏幕的宽度。这是为什么，我该如何解决这个问题？这是我的代码：

<html>
  <head>
    <title>Why oh why</title>
    <style>
      body { margin:0px;padding:0px; }
      #fullscreen
        {
        position:fixed;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background:rgba(168,168,168,1);
        }
    #input
      {
      resize:none;
      width:48%;
      height:98%;
      margin:1% 1% 1% 1%;
      float:left;
      border:0px;
      padding:0px;
      }
    </style>
  </head>
  <body>
    <div id="fullscreen">
      <textarea id="input" rows="10" cols="50"></textarea>
    </div>
  </body>
</html>

Answer 1

％中的

垂直margin或padding将父级的宽度作为参考，因此当您在1200px宽的屏幕上说margin:1%;时，它给出120px的余量，无论height是什么窗口

请参阅WC3上的解释和提醒：http://www.w3.org/TR/CSS2/box.html#margin-properties

在这里使用 codepen 并查看布局中百分比中vertical-padding的内容：）

CSS高度是否取决于宽度？

1 个答案: