Question

我希望为我的网站创建一个布局，其中侧边栏固定在视口的右侧，宽度为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的背景必须是白色的。

Answer 1

这样的事情：

<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背景覆盖。包装器上的背景图像以类似的方式工作，但在这种情况下，它只是确保侧边栏图像始终延伸到内容的底部。

Answer 2

此解决方案满足您的大多数要求，但您需要提供内容+侧边栏的宽度（在这种情况下，我放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。（您可以通过向左和向右拖动中间框架进行测试）

Answer 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
 }
}

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

3 个答案: