html - 位置 : fixed scrolls too far

标签 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;
}

最佳答案

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

关于html - 位置 : fixed scrolls too far,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16379099/

相关文章:

html - 使用 css 自定义选择框

html - 使 div 为 TD 的 100% 高度(IE 问题)

javascript - 如何找出发出警报的位置?

javascript - 子菜单在鼠标悬停时断开连接,也无法导航到子菜单

html - 使用 Bootstrap 左右拆分两个垂直对齐的列

html - 用百分比调整内容的高度

html - 绝对位置和 margin : auto

jquery - 黑色覆盖显示在 ie9 中的 html5 视频之上

css打印样式

html - 为什么垂直居中网页在小型显示器和移动设备上会中断?