jquery - 负边距 div 正在造成溢出

Question

我有一个位于右侧的 div，当单击“添加”按钮时它会滑出。我将它的边距设置为其宽度并使用负值。问题是，当它应该被隐藏时，它会产生溢出，当我单击以显示它时，它进入 View 并且我失去了溢出。

谁能告诉我我遇到的问题出在哪里？当该 div 具有负宽度时，不应有任何溢出

$(document).ready(function() {

  // #region Calculations

  CalcHeight();
  CalcWidth();

  $(window).resize(function() {
    CalcHeight();
    CalcWidth();
  });

  // #endregion

  $('#menu-toggle').on('click', function(e) {
    //e.preventDefault();

    $('#TheContainer').toggleClass("menuShort");
  });

  $('#btnCallEditorBlade').on('click', function() {
    $('#EditorBlade').toggleClass("open-blade");
  });

});

// #region Calculations

function CalcHeight() {
  var fullHeight = $(window).height();
  console.log("Full Height is: " + fullHeight);

  console.log("TheContainer's Height: " + $('#TheContainer').height());
}

function CalcWidth() {
  var fullWidth = $(window).width();
  console.log("Full Width is: " + fullWidth);

  console.log("TheContainer's Width: " + $('#TheContainer').width());
}

// #endregion

body {
  margin: 0;
  padding: 0;
  border: none;
  background-color: pink;
}

#TheContainer {
  padding: 10px;
  background-color: cadetblue;
  width: 100%;
  height: calc(100% - 51px);
  position: fixed;
  box-sizing: border-box;
  margin-left: -15px;
  margin-top: 51px;
  margin-bottom: 10px;
}

#row1 {
  border: 1px solid black;
  height: 100vh;
  padding: 10px;
  margin-top: -12px;
}

#Categories {
  border: 1px solid yellow;
  position: fixed;
  height: 100%;
  width: 200px;
  margin-left: -21px;
  background-color: yellow;
  margin-top: 25px;
  z-index: 1000;
  transition: 1s;
}

#SubCategories {
  border: 1px solid green;
  position: fixed;
  height: 100%;
  width: 175px;
  background-color: green;
  margin-top: 25px;
  margin-left: 179px;
  z-index: 1000;
  transition: 1s;
}

#Header {
  border: 1px solid #0094ff;
  background-color: #0094ff;
  width: 100vw;
  height: 35px;
  margin-top: -9px;
  position: fixed;
  margin-left: -7px;
}

#ContentHeader {
  border: 1px solid #ff006e;
  background-color: #ff006e;
  width: 100vw;
  height: 35px;
  margin-top: 25px;
  position: fixed;
  margin-left: -1px;
}

#ContentArea {
  border: 1px solid darkgray;
  background-color: darkgray;
  width: 100vw;
  height: 100%;
  transition: 1s;
}

.main-area {
  border: 1px solid orange;
  margin-top: 59px;
  padding-left: 343px;
  background-color: orange;
  height: 100vh;
  margin-right: -10px;
  transition: 1s;
}

#menu-toggle {
  margin-left: 10px;
  font-size: 26px;
  margin-top: -2px;
}

#TheContainer.menuShort #Categories {
  width: 60px;
  transition: 1s;
}

#TheContainer.menuShort #SubCategories {
  margin-left: 39px;
  transition: 1s;
}

#TheContainer.menuShort .main-area {
  padding-left: 205px;
  transition: 1s;
}

#EditorBlade {
  width: 525px;
  height: 750px;
  border: 1px solid white;
  background-color: white;
  float: right;
  position: relative;
  z-index: 3000;
  margin-right: -550px;
  /*margin-right:-540px;*/
  margin-top: 120px;
  box-shadow: -3px 5px 10px;
  transition: 1s;
}

#EditorBlade.open-blade {
  margin-right: -15px;
  transition: 1s;
}

.content-links {
  padding-left: 361px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div id="TheContainer">
    <div class="row" id="row1">

      <div id="Header">
        <a id="menu-toggle" href="#">
          <i class="fa fa-bars" style="color:white;"></i>
        </a>
      </div>

      <div id="ContentHeader">
        <div class="content-links">
          <a href="#" id="btnCallEditorBlade"><i class="fa fa-plus" style="color:lightgreen; font-size:14px;"></i> Add</a>
        </div>
      </div>

      <div id="Categories-Wrapper">
        <div id="Categories">

        </div>
      </div>

      <div id="SubCategories-Wrapper">
        <div id="SubCategories">

        </div>
      </div>

      <div id="ContentArea-Wrapper">

        <div id="ContentArea">
          <div class="container-fluid">
            <div class="col-lg-12">
              <div class="main-area">
                Hello
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>



</div>

<div id="EditorBlade">

</div>

Answer 1

将 overflow-x: hidden; 添加到 body 以防止溢出和水平滚动条。

$(document).ready(function() {

  // #region Calculations

  CalcHeight();
  CalcWidth();

  $(window).resize(function() {
    CalcHeight();
    CalcWidth();
  });

  // #endregion

  $('#menu-toggle').on('click', function(e) {
    //e.preventDefault();

    $('#TheContainer').toggleClass("menuShort");
  });

  $('#btnCallEditorBlade').on('click', function() {
    $('#EditorBlade').toggleClass("open-blade");
  });

});

// #region Calculations

function CalcHeight() {
  var fullHeight = $(window).height();
  console.log("Full Height is: " + fullHeight);

  console.log("TheContainer's Height: " + $('#TheContainer').height());
}

function CalcWidth() {
  var fullWidth = $(window).width();
  console.log("Full Width is: " + fullWidth);

  console.log("TheContainer's Width: " + $('#TheContainer').width());
}

// #endregion

body {
  margin: 0;
  padding: 0;
  border: none;
  background-color: pink;
  overflow-x: hidden;
}

#TheContainer {
  padding: 10px;
  background-color: cadetblue;
  width: 100%;
  height: calc(100% - 51px);
  position: fixed;
  box-sizing: border-box;
  margin-left: -15px;
  margin-top: 51px;
  margin-bottom: 10px;
}

#row1 {
  border: 1px solid black;
  height: 100vh;
  padding: 10px;
  margin-top: -12px;
}

#Categories {
  border: 1px solid yellow;
  position: fixed;
  height: 100%;
  width: 200px;
  margin-left: -21px;
  background-color: yellow;
  margin-top: 25px;
  z-index: 1000;
  transition: 1s;
}

#SubCategories {
  border: 1px solid green;
  position: fixed;
  height: 100%;
  width: 175px;
  background-color: green;
  margin-top: 25px;
  margin-left: 179px;
  z-index: 1000;
  transition: 1s;
}

#Header {
  border: 1px solid #0094ff;
  background-color: #0094ff;
  width: 100vw;
  height: 35px;
  margin-top: -9px;
  position: fixed;
  margin-left: -7px;
}

#ContentHeader {
  border: 1px solid #ff006e;
  background-color: #ff006e;
  width: 100vw;
  height: 35px;
  margin-top: 25px;
  position: fixed;
  margin-left: -1px;
}

#ContentArea {
  border: 1px solid darkgray;
  background-color: darkgray;
  width: 100vw;
  height: 100%;
  transition: 1s;
}

.main-area {
  border: 1px solid orange;
  margin-top: 59px;
  padding-left: 343px;
  background-color: orange;
  height: 100vh;
  margin-right: -10px;
  transition: 1s;
}

#menu-toggle {
  margin-left: 10px;
  font-size: 26px;
  margin-top: -2px;
}

#TheContainer.menuShort #Categories {
  width: 60px;
  transition: 1s;
}

#TheContainer.menuShort #SubCategories {
  margin-left: 39px;
  transition: 1s;
}

#TheContainer.menuShort .main-area {
  padding-left: 205px;
  transition: 1s;
}

#EditorBlade {
  width: 525px;
  height: 750px;
  border: 1px solid white;
  background-color: white;
  float: right;
  position: relative;
  z-index: 3000;
  margin-right: -550px;
  /*margin-right:-540px;*/
  margin-top: 120px;
  box-shadow: -3px 5px 10px;
  transition: 1s;
}

#EditorBlade.open-blade {
  margin-right: -15px;
  transition: 1s;
}

.content-links {
  padding-left: 361px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div id="TheContainer">
    <div class="row" id="row1">

      <div id="Header">
        <a id="menu-toggle" href="#">
          <i class="fa fa-bars" style="color:white;"></i>
        </a>
      </div>

      <div id="ContentHeader">
        <div class="content-links">
          <a href="#" id="btnCallEditorBlade"><i class="fa fa-plus" style="color:lightgreen; font-size:14px;"></i> Add</a>
        </div>
      </div>

      <div id="Categories-Wrapper">
        <div id="Categories">

        </div>
      </div>

      <div id="SubCategories-Wrapper">
        <div id="SubCategories">

        </div>
      </div>

      <div id="ContentArea-Wrapper">

        <div id="ContentArea">
          <div class="container-fluid">
            <div class="col-lg-12">
              <div class="main-area">
                Hello
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>



</div>

<div id="EditorBlade">

</div>