Html 居中位置：视口达到指定宽度时的固定div_Html_Css_Center_Css Position

Html 居中位置：视口达到指定宽度时的固定div

html css

Html 居中位置：视口达到指定宽度时的固定div,html,css,center,css-position,Html,Css,Center,Css Position,我希望为我的站点创建一个布局，其中侧边栏固定在视口的右侧，宽度为30%（内容位于其左侧），直到浏览器窗口达到某个宽度，此时我希望内容和侧边栏居中，不再随浏览器窗口增长（因为在非常大的宽度下阅读变得非常困难）。下面是使用html的一个想法： <body> <div id=sidebar>sidebar content</div> <div id=content>articles, images, etc</div> 在这一点上，当内容变

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

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

在这一点上，当内容变得比49em宽时，它会粘在页面的右侧，在它和固定侧边栏之间产生越来越大的间隙。我希望它的最大宽度达到49em，侧边栏达到21em（因此它们仍然是70:30）并保持固定，但使整个70 em的宽度在视口中居中

我还希望侧边栏的背景颜色能够覆盖从内容边缘到屏幕右侧的整个过程（即，边栏和内容居中且最大宽度为70em的包含div不起作用，因为边栏的背景只会指向包含div的边缘，而不是视口）。这一点并不重要，因为在body元素上添加某种纹理背景可能会让页面看起来像是“坐”在某个纹理表面上（不理想，但很好）。我只是无法在保持侧边栏固定位置的同时将侧边栏和内容居中

谢谢

更新：以下是我正在寻找的一个非常粗略的示意图：

|A | B | C | D|

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

类似的内容：

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

身体上的背景图像会一直到屏幕边缘。你可以使用一个足够大的背景图像，但是足够小，可以被

#wrapper

背景所覆盖。wrapper上的背景图像的工作方式类似，但在这种情况下，它只是让su请注意，侧边栏图像总是延伸到内容的底部。

此解决方案满足您的大多数要求，但您需要提供内容+侧边栏的宽度（在本例中，我将其设置为70em）

HTML:

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

#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;
}

（只需左右拖动中间帧即可进行测试）

您可以将媒体查询添加到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
 }
}

你能重新描述一下你的上一个要求吗，我不明白（关于纹理背景）。提供一点示意图也会有帮助。更新了，希望它更清晰一点。在这种情况下，侧边栏不会固定。侧边栏的固定位置是关键。更新了我的答案以将其考虑在内（很抱歉错过）是的，这就是我要做的。问题是侧边栏的固定宽度将其从容器div中取出，因此在视口超过设置的宽度后，它不会居中。但是如果它固定在右侧，它将永远不会居中…这就是我不想得到的，我希望它总是被固定，以便侧边栏中的内容可以被删除oE滚动时不会移动。但是，当窗口超过足够大的宽度（70em）时，我希望侧边栏以内容为中心，这样它就不会被拉伸到荒谬的程度。谢谢，但我不认为这会使侧边栏保持固定，是吗？你只需要添加“position:fixed；”来修复它。我在你原来的帖子中错过了这一点。position:fixed将侧边栏从流中移除，这样它就不再得到c当总宽度超过70em时输入。如果您添加相对于父级的位置，则此问题将消失。好的，当它位于左侧时，此问题有效（即，我不会在侧边栏中放置任何浮动或右/顶部位置）.但是，当我尝试将侧边栏放在右侧时，它不起作用；float:right对固定位置没有任何作用，如果我这样做：“top:0；right:0”，它会将其固定在浏览器的右上角，而不是包装器div。如此接近！有什么想法吗？