CSS3 Box Sizing

Question

我试图获得带有边框的4个div元素来占据整个页面，并让它们都可以调整大小。当你调整一个，其余的应该与你正在调整大小的那个一致，这样就不会有任何空的空格。边框应始终在所有方面都可见。

我已将我现在所拥有的内容上传到https://jsfiddle.net/f8yqu43q/

非常感谢任何帮助。我也决定只能一次调整两侧或底部的大小。类似于JSFiddle实际处理它的方式。下面我发布了我在本地工作的代码，因为堆栈溢出迫使我在共享JSFiddle链接时发布代码

<html>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type='text/javascript' src='app.js'></script>
<script
  src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'
  integrity='sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30='
  crossorigin='anonymous'></script>
  <link rel="stylesheet" type="text/css" 
  href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
  <link rel='stylesheet' href='stylesheet.css'>
  <body>

    <div id='NW'></div>
    <div id='SW'></div>
    <div id='SE'></div>
    <div id='NE'></div>
      <script>
  $( function() {
    $( "#NW" ).resizable({
        alsoResize: '#SW,#SE,#NE'
    });
  } );
  </script>

</body>
</html>

和CSS

html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:50%; height:50% }
#NW { top:0;   left:0;   border-style:solid;border-width:6px;border-color:gray;  }
#NE { top:0;   left:50%; border-style:solid;border-width:6px;border-color:gray;    }
#SW { top:50%; left:0;   border-style:solid;border-width:6px;border-color:gray;   }
#SE { top:50%; left:50%; border-style:solid;border-width:6px;border-color:gray;     }

Answer 1

你需要将box-sizing: border-box;添加到所有4个区块，没有它你的宽度不计算边界，所以每个区块是50％+ 12px（边界两侧），这就是你边界移出的原因：

CSS3 Box Sizing

CSS3 box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。

没有CSS3 box-sizing属性   默认情况下，元素的宽度和高度计算如下：

width + padding + border =元素的实际宽度

height + padding + border =元素的实际高度

这意味着：当您设置元素的宽度/高度时，元素通常会显示大于您设置的元素（因为元素的边框和填充将添加到元素的指定宽度/高度）。

参考：https://www.w3schools.com/css/css3_box-sizing.asp

$(document).ready(function() {
  var nw = $("#NW"),
    sw = $("#SW"),
    se = $("#SE"),
    ne = $("#NE"),
    body = $('body');
  var swse = $("#SW, #SE"),
    nwne = $("#NW, #NE");

  $("#NW").resize(function() {
    resizeNW();
  });

  function resizeNW() {
    ne.width(parseInt(body.width() - nw.width() - 12));
    ne.height(parseInt(nw.height() - 12));
    ne.css('left', parseInt(nw.width()));
    swse.height(parseInt(body.height() - nw.height() - 12));
    swse.css('top', parseInt(nw.height()));
    sw.width(parseInt(nw.width() - 12));
    se.width(parseInt(body.width() - nw.width() - 12));
    se.css('left', parseInt(nw.width()));
  }

  $("#NW").resizable({});
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  position: fixed;
  width: 50%;
  height: 50%
}

#NW,
#SW,
#SE,
#NE {
  border-style: solid;
  border-width: 6px;
  border-color: gray;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
}

#NW {
  top: 0;
  left: 0;
}

#NE {
  top: 0;
  left: 50%;
}

#SW {
  top: 50%;
  left: 0;
}

#SE {
  top: 50%;
  left: 50%;
}

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js' integrity='sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=' crossorigin='anonymous'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<body>

  <div id='NW'>nw</div>
  <div id='SW'>sw</div>
  <div id='SE'>se</div>
  <div id='NE'>ne</div>

</body>

样式可调整大小的div总是占据整个页面

1 个答案:

CSS3 Box Sizing

width + padding + border =元素的实际宽度

height + padding + border =元素的实际高度