更新

Question

如果你帮我解决了以下问题，我真的很感激。

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

无论屏幕尺寸有多大，填充+边距应始终为5像素+ 5像素。

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

您可以使用border而不是测试填充/边距：

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，只是补充一下，你可能要调整innerarea的高度

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>

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

4 个答案:

更新