位置:固定卷轴太远了

时间:2013-05-04 21:24:01

标签: html css margin css-position

我的问题是关于此图片中的布局:

enter image description here

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

侧边栏使用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;
}

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分: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;
}

答案 2 :(得分:0)

bottom: 20px;中尝试div#sidebar属性。