0

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

4

3 回答 3

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 在这里。（中间框左右拖动即可测试）​</p>

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

于 2012-04-03T22:14:35.100 回答
0

您可以将媒体查询添加到您的 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
 }
}
于 2016-09-28T07:49:28.577 回答