负边缘div正在创建溢出

Question

我有一个div位于右侧，然后在单击"添加"按钮时滑出。我将其设置为宽度并使用负值。问题是，当它应该被隐藏时，它会产生溢出，当我单击以显示它时，它就会出现并失去了溢出。

谁能告诉我我遇到的问题在哪里？当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>