1

我的问题是关于这张图片中的布局：

在此处输入图像描述

  • 右上角的白框 = 内容框
  • 底部的黑线 = 页脚栏
  • 右侧的框 = 侧边栏框

侧边栏使用 CSS 设置为position: fixed，因此它会跟随用户滚动。

问题是，在小屏幕尺寸上，用户可以滚动太远，这意味着侧边栏框会比页脚栏更向下。

如何使侧边栏在到达页脚之前停止 20 像素？

CSS 代码：

div#sidebar
{
margin: 20px 0px 20px 20px;
width: 270px;
height: 295px;
border: 1px solid #CCC;
background-color:#FFF;
padding: 20px;
position:fixed;
left: 730px;
}

div#content
{
margin: 20px 0px 20px 0px;
width: 650px;
height: 600px;
border: 1px solid #CCC;
background-color:#FFF;
float: left;
padding: 20px;
}

div#footer
{
width: 100%;
min-width:1024px;
height: 30px;
border: 1px solid black;
background:#252525;
text-align:center;
padding-top:10px;
color:#555;
}
4

3 回答 3

0

在bottom: 20px;您的div#sidebar.

于 2013-05-04T22:03:19.093 回答
0

我会尝试调整#sidebar margin-bottom。你的 HTML 是什么？

于 2013-05-04T21:44:02.037 回答
0

如果您希望内容框通过缩放停止变大，我认为您必须使用 javascript。如果我正确理解您的问题，则该内容会超出页脚。尝试使用这个：

div#footer
{
width: 100%;
min-width:1024px;
height: 30px;
border: 1px solid black;
background:#252525;
position: relative;
text-align:center;
padding-top:10px;
color:#555;
}
于 2013-05-04T21:45:00.753 回答