使用 jQuery 自动调整 div 大小时的填充和边距错误

Question

如果您能帮助我解决以下问题，我将不胜感激。

我正在尝试使用 jQuery 自动调整 div 的大小以适应不同的屏幕尺寸。问题是当我尝试使用一些填充或边距时，整个布局就会分崩离析。

无论屏幕尺寸有多大，内边距 + 边距应始终为 5 px + 5 px。

Here is what I want to get.

Here is how it looks like with the code below.

JQuery：

  $(document).ready(function() {
      winSize();
      $(window).resize(function(){
          winSize();
      }); 
  });

  function winSize()
  {
      window_height = $(window).height();
      window_width = $(window).width();

      $("#container").css('height', window_height).css('width', window_width);    
      $("#leftArea").css('height', window_height ).css('width', window_width * 0.1);

  }

CSS：

body {
    padding: 0px;
    margin: 0px;
}
#container {
    background-color: red;
}
#leftArea {
    background-color: gray;
    padding: 5px;
}
#innerArea {
    margin: 5px;
    background-color: green;
    width: 100%;
    height: 100%;
}

HTML：

<div id="container">
  <div id ="leftArea">
    <div id="innerArea"> </div>
  </div>
</div>

提前非常感谢！

Answer 1

您可以使用边框代替测试的填充/边距：

http://jsfiddle.net/remus/JkmYn/

#leftArea {
    background-color: gray;
}
#innerArea {
    border: 5px solid gray;
    background-color: green;
    width: 100%;
    height: 100%;
}

Answer 2

使用这个 CSS：

jsFiddle

#leftArea {
    background-color: gray;
    padding:5px;
    box-sizing: border-box;
}
#innerArea {
    background-color: green;
    width: 100%;
    height: 100%;
}

---

更新：

你可以不用 JQuery 而只用 CSS：

jsFiddle: with CSS

jsFiddle: with JQuery

使用这个 CSS：

body {
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}
#container {
    background-color: red;
    width:100vw;
    height:100vh;
}
#leftArea {
    background-color: gray;
    border:5px solid green;
    box-sizing: border-box;
    height:100vh;
    width:10vw;
}

HTML：

<div id="container">
    <div id="leftArea">
        <div id="innerArea"></div>
    </div>
</div>

您可以为任何您想要的框设置边距和内边距，但不要忘记box-sizing: border-box。

box-sizing 的跨浏览器：source

textarea { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Answer 3

我同意 r3mus，只是补充一下，您可能需要调整内部区域的高度

body {
     padding: 0px;
     margin: 0px;
 }
 #container {
     background-color: red;
}
 #innerArea {
     border: 10px solid gray;
     background-color: green;
     height: 95.1%;
    width:100%;
 }

Answer 4

这个怎么样？

http://jsfiddle.net/beauxjames/dZVEA/

一个小的包装器通常可以解决问题：

<div id="container">

    <div id ="leftArea">
        <div class="demoWrapper">
            <div id="innerArea">fff </div>    
        </div>        
    </div>

</div>