CSS：如何使 div 的左边缘跟随具有动画宽度的侧边栏的右边缘？答案

【问题标题】：CSS: how to make the left edge of a div follow the right edge of a sidebar with animated width?CSS：如何使 div 的左边缘跟随具有动画宽度的侧边栏的右边缘？
【发布时间】：2019-12-30 00:53:33
【问题描述】：

作为一个偶尔的 HTML/CSS/JavaScript 编码器，我遇到了一个看似简单的问题。

我想构建一个非常简单的网站布局，其中包含一个内容 div 和一个可以隐藏的左侧边栏。内容 div 具有可变宽度；右侧始终贴在浏览器窗口的右侧，左侧调整到侧边栏。如果显示侧边栏，它应该使用浏览器窗口宽度的定义比例部分。

function toggleSidebar() {
  var sidebar = document.getElementById("mySidebar");
  var content = document.getElementById("myContent");
  if (sidebar.style.width === "0%") {
    sidebar.style.width = "25%";
    content.style.marginLeft = "25%";
  } else {
    sidebar.style.width = "0%";
    content.style.marginLeft = "0%";
  }
}

#myHeaderBar {
  position: fixed;
  left: 0px;
  right: 0px;
  height: 90px;
  z-index: 1;
  border-bottom: 1px solid #A2A2A2;
}

#mySidebar {
  background-color: #F7F7F7;
  position: fixed;
  top: 98px;
  left: 0px;
  width: 25%;
  bottom: 0px;
  overflow-y: auto;
  border-right: 1px solid #A2A2A2;
  transition: 0.5s;
}

#myContent {
  position: absolute;
  top: 98px;
  margin-left: 25%;
  bottom: 0px;
  overflow-y: auto;
  transition: 0.5s;
}

<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>Sidebar Test</title>
</head>

<body>
  <div id="myHeaderBar">
    <h2>Header</h2>
    <a href="#" onclick="toggleSidebar()">Toggle Sidebar</a>
  </div>

  <div id="mySidebar">
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
  </div>

  <div id="myContent">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>


</body>

</html>

这都是微不足道的，而且工作得很好。

当我尝试限制侧边栏的最小和最大宽度时出现了我的问题（这是我想要做的）。

当然，我可以添加

max-width:200px;
min-width:120px;

到 #mySidebar 和（如果显示侧边栏）

sidebar.style.minWidth = "120px";

或（如果隐藏侧边栏）

sidebar.style.minWidth = "0px";

到 toggleSidebar()。

但是 #myContent div 没有等效参数，即没有 min-margin-left 和 max-margin-left 这样的东西。结果，边缘情况下的文本重叠或间隙：

function toggleSidebar() {
  var sidebar = document.getElementById("mySidebar");
  var content = document.getElementById("myContent");
  if (sidebar.style.width === "0%") {
    sidebar.style.width = "25%";
    sidebar.style.minWidth = "120px";
    content.style.marginLeft = "25%";
  } else {
    sidebar.style.width = "0%";
    sidebar.style.minWidth = "0px";
    content.style.marginLeft = "0%";
  }
}

#myHeaderBar {
  position: fixed;
  left: 0px;
  right: 0px;
  height: 90px;
  z-index: 1;
  border-bottom: 1px solid #A2A2A2;
}

#mySidebar {
  background-color: #F7F7F7;
  position: fixed;
  top: 98px;
  left: 0px;
  width: 25%;
  max-width:200px;
  min-width:120px;
  bottom: 0px;
  overflow-y: auto;
  border-right: 1px solid #A2A2A2;
  transition: 0.5s;
}

#myContent {
  position: absolute;
  top: 98px;
  margin-left: 25%;
  bottom: 0px;
  overflow-y: auto;
  transition: 0.5s;
}

<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>Sidebar Test</title>
</head>

<body>
  <div id="myHeaderBar">
    <h2>Header</h2>
    <a href="#" onclick="toggleSidebar()">Toggle Sidebar</a>
  </div>

  <div id="mySidebar">
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
  </div>

  <div id="myContent">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>


</body>

</html>

是否有针对此问题的简洁 CSS/JavaScript 解决方案？我确实不因此想要使用任何 Javascript 库。

提前感谢您的任何提示！

【问题讨论】：

看看 CSS-Grid。它可以做你想做的事，根本不需要任何 Javascript。
所有这些定位都必要吗？
@Holli：我无法用我能想到的所有 CSS 网格变体得到想要的结果。如何将网格列宽设置为 25%，同时限制其最小值和最大值，并将其从 25% 设置为 0%，反之亦然，同时确保相邻网格会效仿？如果您确定我的问题可以通过这种方式解决，请详细说明。
@Paulie_D：据我所知，这是为了实现我想要的，但无论如何，这不是我问题的原因。

标签： javascript html css border sidebar

【解决方案1】：

我不确定我是否理解您的问题：文本在哪里重叠或间隙？您可以添加一个“内部 div”并为其提供所需的属性，以便 myContent 的宽度 - innerDiv 的最小宽度类似于 myContent 的“最小边距”。

function toggleSidebar() {
  var sidebar = document.getElementById("mySidebar");
  var content = document.getElementById("myContent");
  if (sidebar.style.width === "0%") {
    sidebar.style.width = "25%";
    content.style.marginLeft = "25%";
  } else {
    sidebar.style.width = "0%";
    content.style.marginLeft = "0%";
  }
}

#myHeaderBar {
  position: fixed;
  left: 0px;
  right: 0px;
  height: 90px;
  z-index: 1;
  border-bottom: 1px solid #A2A2A2;
}

#mySidebar {
  background-color: #F7F7F7;
  position: fixed;
  top: 98px;
  left: 0px;
  width: 25%;
  bottom: 0px;
  overflow-y: auto;
  border-right: 1px solid #A2A2A2;
  transition: 0.5s;
}

#myContent {
  position: absolute;
  top: 98px;
  margin-left: 25%;
  bottom: 0px;
  overflow-y: auto;
  transition: 0.5s;
  text-align: justify;
  hyphens: auto;
}

#innerDiv {
  width: 80%;
  height: auto;
  padding-left: 10%;
  padding-right: 10%;
 }

<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>Sidebar Test</title>
</head>

<body>
  <div id="myHeaderBar">
    <h2>Header</h2>
    <a href="#" onclick="toggleSidebar()">Toggle Sidebar</a>
  </div>

  <div id="mySidebar">
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
  </div>

  <div id="myContent">
  <div id="innerDiv">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div></div>


</body>

</html>

【讨论】：

如果 25% 小于边栏最小宽度（在我的示例中为 75px），则文本重叠。在这种情况下，#mySidebar 的左边框固定在 75 像素，而 #myContent 的左边缘向左移动更远，例如。 50像素。因此，文本重叠。 – 当 25% 大于最大侧边栏宽度（在我的示例中为 400 像素）时，情况正好相反。然后，#mySidebar 的左边框固定在 400 像素，而 #myContent 的左边缘向右移动更远，例如。 500 像素。因此，侧边栏和内容之间存在差距。我应该用这些最小值/最大值显示我的示例代码以使其显而易见。
很遗憾，您的建议没有解决办法。
我编辑了我的原始问题并添加了带有这些最小值/最大值的示例代码（我选择了 120 像素和 200 像素），希望可以使问题变得明显。

【解决方案2】：

感谢您的意见！

在调查@Holli 建议的CSS Grid 解决方案时（未成功），我发现几乎有效的CSS Flexbox 解决方案（请参阅下面的剩余问题）。这是代码sn-p；我将 #mySidebar 的最小和最大宽度更改为 120px 和 200px 以使效果更加明显。

function toggleSidebar() {
  var sidebar = document.getElementById("mySidebar");
  var content = document.getElementById("myContent");
  if (sidebar.style.width === "0%") {
    sidebar.style.width = "25%";
    sidebar.style.minWidth = "120px";
  } else {
    sidebar.style.width = "0%";
    sidebar.style.minWidth = "0px";
  }
}

#myHeaderBar {
  position: fixed;
  left: 0px;
  right: 0px;
  height: 90px;
  z-index: 1;
  border-bottom: 1px solid #A2A2A2;
}

#myContainer {
  position: absolute;
  display: flex;
  top: 99px;
  left: 0px;
  bottom: 0px
}

#mySidebar {
  background-color: #F7F7F7;
  width: 25%;
  max-width: 200px;
  min-width: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #A2A2A2;
  transition: 0.5s;
}

#myContent {
  flex: 1;
  overflow-y: auto;
  transition: 0.5s;
}

<div id="myHeaderBar">
  <h2>Header</h2>
  <a href="#" onclick="toggleSidebar()">Toggle Sidebar</a>
</div>

<div id="myContainer">
  <div id="mySidebar">
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
    <p>Some Link</p>
  </div>

  <div id="myContent">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>

</div>

仍然存在一个问题：（编辑：解决了一个问题并相应更新了代码，因此只剩下一个问题（不是两个））

为了使其正常工作，我需要将 #myContainer（Flex 容器）从顶部定位 99px，尽管 #myHeaderBar 仅 90 像素。我不知道为什么会这样。当然，指定 99px 可以解决问题并且没有问题（据我目前所见），但我想了解发生了什么。有什么想法吗？

【讨论】：