使用 CSS 定位避免侧边栏与 tumblr 上的内容重叠答案

【问题标题】：Avoid sidebar overlapping content on tumblr with CSS positioning使用 CSS 定位避免侧边栏与 tumblr 上的内容重叠
【发布时间】：2013-05-15 05:39:51
【问题描述】：

我在避免边栏与 tumblr 上博客的主要内容重叠时遇到问题。我在 tumblr 上使用我修改过的预制模板。我可以将侧边栏定位在右上角的唯一方法是使用绝对位置或固定位置：

#sidebar{
position:fixed;
top:20px;
right:20px;
}

当使用例如相对，侧边栏在我的主要内容之后位于底部。

我的页面是这样构建的：

<body>
    <div id="page">

        <div id="header">
        </div>
        <div id="content">
        </div>

    </div>

    <div id="sidebar">
    </div>

</body>

点击here查看页面。我尝试将侧边栏放在页面 div 内，但宽度有一个限制，我想保留它。提前谢谢你。

【问题讨论】：

当屏幕缩小到导致重叠的宽度时，您希望发生什么？
我希望边栏和页面在发生这种情况时缩小。如果可能的话，我想避免使用任何 javascript。否则，任何类似的解决方案都一样好。
您希望容纳的最小宽度屏幕是多少？例如，如果我将浏览器窗口缩小到 iPhone 的宽度，那么“仅缩小侧边栏”的解决方案是不可行的，因为它必须非常窄。
我明白你的意思，我想我必须考虑一下并阅读一些有关网页和屏幕分辨率的信息，然后才能进一步定义它。不过，我绝对不会试图让它适用于移动平台。

标签： css positioning tumblr sidebar

【解决方案1】：

根据您的最新评论，这应该可以解决您的问题：

您可以在页面上设置最小宽度，稍微重新排列标记，然后删除侧边栏上的一些样式。如果您保持现在的一切，那么以下内容将有所帮助：

在您的body 标签上设置min-width: 1250px;
将sidebar 元素移到page 元素之前
从sidebar 元素中删除position: fixed;

这将防止菜单与页面内容重叠，并在用户窗口小于 1250 像素时向页面添加水平滚动条。如果您想支持更小的最小宽度，或者如果您遇到背景图像在小分辨率下不居中的问题，则需要进行少量修改。

【讨论】：