居中位置：当视口达到指定宽度时固定 div答案

【问题标题】：Centering a position: fixed div When Viewport Reaches a Designated Width居中位置：当视口达到指定宽度时固定 div
【发布时间】：2012-04-17 15:10:14
【问题描述】：

我希望为我的网站创建一个布局，其中侧边栏固定在视口右侧，宽度为 30%（内容在其左侧），直到浏览器窗口达到一定宽度，在该宽度点我希望内容和侧边栏居中并且不再随浏览器窗口增长（因为它变得难以在非常大的宽度下阅读）。这是使用的 html 的一个想法：

<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>

以下是一些用于格式化的基本 HTML：

#sidebar {
    width: 30%;
    position: fixed;
    right: 0;
    top: 0;
    background-color: gray;
}
#content {
    width: 70%;
    margin-right: 30%;
    max-width: 49em;
}

此时，当内容宽度超过 49em 时，它会粘在页面的右侧，从而在它与固定侧边栏之间产生越来越大的间隙。我想要的是让它达到 49em 的最大宽度，让侧边栏达到 21em（所以它们仍然是 70:30）并保持固定，但是让整个 70em 的宽度位于视口的中心。

我还希望侧边栏的背景颜色从内容的边缘一直延伸到屏幕的右侧（即包含 div，将侧边栏和内容居中，最大宽度为 70em不起作用，因为侧边栏的背景只会转到包含 div 而不是视口的边缘）。那个并不那么重要，因为在 body 元素上放置某种带纹理的背景可能看起来不错，以使其看起来好像页面“坐在”某个带纹理的表面上（不理想，但很好）。我只是无法在保持侧边栏固定位置的同时使侧边栏和内容居中。

谢谢！

更新：这是我正在寻找的非常粗略的示意图：

|A|B|C|D|

B 是最大宽度为 49em 的内容区域。 C 是最大宽度为 21em 的侧边栏，它必须有固定的定位。 A 和 D 将是边距（视口宽度和 70em 之间差异的一半）。 D 的背景必须与侧边栏的颜色相同（灰色）。 A的背景必须是白色的。

【问题讨论】：

你能否重新表述你的最后一个要求，我不明白（关于纹理背景）。提供一点示意图也会很有帮助。
更新了，希望更清楚一点。

标签： html css center css-position

【解决方案1】：

这个方案可以满足你的大部分需求，但是你需要提供内容+侧边栏的宽度（本例中我放了70em）

HTML：

<div id="container">
    <div id="content">articles, images, etc</div>
    <div id="sidebar">sidebar content</div>
</div>

CSS：

#sidebar {
    width: 29%; background-color: gray; border: 1px gold solid;
    float: left;
    position: fixed; right: 0; top: 0;
}

#content {
    width: 69%; max-width: 49em; border: 1px silver solid;
    float: left;
}

#container {
    max-width: 70em;
    margin: 0px auto;
}

jsFiddle here。（只需左右拖动中间框即可测试）

【讨论】：

在这种情况下侧边栏不会被修复。侧边栏的固定位置是关键。
更新了我的答案以考虑到它（很抱歉错过了）
是的，我就是这么做的。问题是侧边栏的固定宽度将其从容器div中取出，因此在视口超过设定宽度后它不会居中。
但如果它固定在右边，它永远不会居中......这是我没有得到的
我想要的是它始终被修复，以便侧边栏中的内容在滚动时不会移动。但是，当窗口超过足够大的宽度（70em）时，我希望侧边栏以内容为中心，这样它就不会被拉伸到荒谬的比例。

【解决方案2】：

类似这样的：

<body>
    <div id="wrapper">
        <div id="sidebar">sidebar content</div>
        <div id="content">articles, images, etc</div>
    </div>
</body>

使用与此类似的 CSS：

body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
    max-width:1000px;
    margin:0 auto;
    background:#FFF url(imageForSidebar.png) -66% top repeat-y;
    position:relative;
}
#sidebar {
    width:30%;
    float:right;
    position: fixed;
}
#content { margin-right:30%; }

主体上的背景图像会一直处理到屏幕边缘。您将使用足够大的背景图像来执行此操作，但又足够小以使其被#wrapper 背景覆盖。包装器上的背景图像以类似的方式工作，但在这种情况下，它只是确保侧边栏图像始终延伸到内容的底部。

【讨论】：

谢谢，但我认为这不会让侧边栏保持固定，不是吗？
您只需要添加“位置：固定；”要解决这个问题。我在您的原始帖子中错过了这一点。
position:fixed 将侧边栏从流中取出，因此当总宽度超过 70em 时它不再居中。
如果你添加相对于父级的位置，这个问题就会消失。
好的，它在左侧时有效（即，我没有在侧边栏放置任何浮动或右/上定位）。但是，当我尝试将侧边栏放在右侧时，它不起作用； float: right 对固定定位没有任何作用，如果我这样做：“top:0; right:0”，它会将其固定在浏览器的右上角，而不是包装器 div。很近！有什么想法吗？

【解决方案3】：

您可以将媒体查询添加到您的 css 中

//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}

//media query (you can add max and min width of the sceen or one of both)
@media screen and (min-width:500px) { 
    #sidebar{
       //css you want to apply when when width is changed
 }
}

【讨论】：