将div固定到居中主要分区

Question

有两个div，一个是主要内容的.main;对于某些设计装饰，一个是.aside。

我只想在台式机上放置一边，所以我把它放在媒体查询中。当视口正好是1000px时，您可以看到主要右侧的旁边引脚没有任何间隙或重叠。

但是当它大于1000px时，它们将开始重叠，我不希望它发生。 有没有办法用CSS来维持两个div的关系，或者我需要JS？换句话说，除了左边缘总是附加到主右边缘边缘。

我尝试使用calc()，但无法找到正确的数学公式。另请注意，position:fixed旁边是必需的，因为在实际情况下它需要更大的屏幕，元素更大，并且永远不应触发水平滚动条。

codepen

＆＃13;

＆＃13;

body {
  margin: 0;
}

.main {
  max-width: 400px;
  height: 100px;
  margin: 0 auto;
  background: pink;
}

@media (min-width: 1000px) {
  .aside {
    position: fixed;
    left: 700px;
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
  }
}

＆＃13;

<div class="main"></div>
<div class="aside"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在left: calc(50% + 200px);元素上使用aside，这将始终将其放置在水平中心的200px处：

＆＃13;

＆＃13;

body {
  margin: 0;
}

.main {
  max-width: 400px;
  height: 100px;
  margin: 0 auto;
  background: pink;
}

@media (min-width: 1000px) {
  .aside {
    position: fixed;
    left: calc(50% + 200px);
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
  }
}

＆＃13;

<div class="main"></div>
<div class="aside"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下公式。您的main最大宽度为400像素，屏幕宽度为100％，因此两边的边距均为(100% - 400px)，我们除以2只得到一边。

您还可以引入CSS变量以便更好地处理此

:root {
  --main-width: 400px;
}

body {
  margin: 0;
}

.main {
  max-width: var(--main-width);
  height: 100px;
  margin: 0 auto;
  background: pink;
}

@media (min-width: 1000px) {
  .aside {
    position: fixed;
    right: calc((100% - var(--main-width)) / 2);
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
  }
}

<div class="main"></div>
<div class="aside"></div>

如果您希望aside ，只需从上一次计算中删除其宽度：

:root {
  --main-width: 400px;
}

body {
  margin: 0;
}

.main {
  max-width: var(--main-width);
  height: 100px;
  margin: 0 auto;
  background: pink;
}

@media (min-width: 1000px) {
  .aside {
    position: fixed;
    right: calc(calc((100% - var(--main-width)) / 2) - 200px);
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
  }
}

<div class="main"></div>
<div class="aside"></div>

如果你想将它应用于左侧，那么逻辑相同。

((100% - width of main) / 2) - width of aside

或者

50% - (width of main/2) - width of aside