Question

我有一个带有侧边栏和主要内容的布局，该内部元素位于称为包装器的父元素中，并且有一个按钮可以切换相对于侧边栏绝对定位的侧边栏。但是，在侧边栏关闭时，主要内容并未保持完整宽度。我能够发现将侧边栏固定为固定即可解决问题，但是我不希望将其固定为固定，有没有一种方法可以在不将侧边栏固定固定的情况下实现这一目标。我已经使用翻译来切换侧栏。

Jsfiddle-https://jsfiddle.net/wu1zfg35/

这是CSS。工作代码可以在js小提琴链接中找到

body {
  margin: 0;
}

.wrapper{
  display: flex;
  height: 100vh;
}

.sidebar {
  position: relative;
  /* position: fixed;  */
  width: 350px;
  height: 100%;
  background-color: red;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -webkit-transform: translate3d(-100%, 0px, 0px);
  transform: translate3d(-100%, 0px, 0px);
}

.main-content {
  width: 100%;
  background-color: yellow;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.hide-customize-tab {
  position: absolute;
  display: flex;
  top: 50%;
  right: -25px;
  align-items: center;
  justify-content: center;
  height: 25px;
  width: 25px;
  background-color: black;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  cursor: pointer;
}

.hide-customize-tab .close-button {
  display: none;
  height: 10px;
  width: 7px;
}
.hide-customize-tab .open-button {
  height: 10px;
  width: 7px;
}

.wrapper.sidebar-opened .sidebar {
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);

}

.wrapper.sidebar-opened .sidebar .hide-customize-tab {
  right: -15px;
}

.wrapper.sidebar-opened .sidebar .hide-customize-tab .open-button {
  display: none;
}

.wrapper.sidebar-opened .sidebar .hide-customize-tab .close-button {
  display: block;
}

.wrapper.sidebar-opened .main-content {
  /* margin-left: 350px; */
  width: calc(100% - 350px);
}

Answer 1

移除宽度：350px；从.sidebar并将其添加到.wrapper.sidebar-打开的.sidebar

所以代码会是

.sidebar {
    width: 0;
}

.wrapper.sidebar-opened .sidebar {
    width: 350px;
}

侧栏切换-切换侧栏时，主要内容不会拉伸到全宽

1 个答案: