Question

我有一个侧边栏设置为固定位置，我还有主要内容的区域。问题是我希望将内容与侧边栏相关联。但由于其位置设置为固定，内容仅针对身体的整个宽度居中。

我知道这可以通过设置正确的内容的主体边距来解决，但我在某些页面上只有侧边栏而不是全部。我创建了一个fiddle来演示整体问题。所以在这里，侧边栏出现的时间有一半，而有一半的时间不在那里。但内容的位置始终相同，这不是我想要的。我希望它在剩余的可用空间方面居中（在侧栏之后（如果它存在））。

简而言之，我希望将HTML结构（#everything和#content）保持为静态，但侧边栏可以进行任何必要的更改以使其工作。

我在考虑可能没有固定的侧边栏，但是高度只是无限长，并且在它的顶部添加了一个固定元素，它将具有内容。通过这种方式，侧边栏可以将内容移开并使其正确居中，同时还可以修复内容。但是我不知道如何让那个侧边栏留在那里并且无限长......

CSS：

#sidebar {
    position: fixed;
    width: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    border-right: 1px solid #111;
    padding:5px;
    background:#f3f3f3;
}

#content {
    width:250px;
    margin:0 auto;
}

Answer 1

以下有点复杂，但您可以尝试以下

#everything{
    display:flex;
}
#sidebar {
    width: 200px;
    height:100%;
    border:1px solid #ccc;
}
#sidebar div{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    border-right: 1px solid #111;
    padding:5px;
    background:#f3f3f3;
     width: 200px;
}
#content {
    flex:1;
}
#content div{
    width:250px;
    margin:0 auto;

}

您可以在以下小提琴中找到html部分JsFiddle

Answer 2

这是非常好用的简单例子，用于对齐自动中心和位置固定

<强> HTML ：

<div class="popup">
  <div class="wrapper">
       some content
    </div>
</div>

<强> CSS ：

.popup{
    position:fixed;
    left:50%;
}
.popup .wrapper{
    position:relative; 
    left:-50%;
}

示例：

JsFiddle 快乐：）

CSS位置固定中心兄弟

2 个答案: