CODEWITHSUNDEEP
jqueryhtmljquery-ui
MalyG
MalyG

Reputation: 321

Style resizable divs to always take up the entire page

I'm trying to get 4 div elements with borders to take up the entire page, and have them all resizable. When you resize one,the rest should conform with the one you're actively resizing, so that there are never any empty spaces. The borders should always be visible on all sides.

I've uploaded what I've got right now to https://jsfiddle.net/f8yqu43q/

Any assistance is greatly appreciated. I'd also settle for only being able to resize the sides or bottom, one at a time. Similar to how JSFiddle handles it actually. Below I've posted the code I'm working with locally, since stack overflow forces me to post code when sharing a JSFiddle link

<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>

and the 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;     }

Upvotes: 1

Views: 139

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

You need to add box-sizing: border-box; to all 4 blocks, without it your width does not count border so each block is 50% + 12px (border both side), that why you border shift out:

CSS3 Box Sizing

The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.

Without the CSS3 box-sizing Property By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element

height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element's border and padding are added to the element's specified width/height).

REF: 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>

Upvotes: 1

Related Questions