修复了带偏移的div,无法滚动到底部

时间:2015-11-26 11:10:15

标签: html css

使用div定位了侧边栏position: fixed;,并使用top: 90px进行了偏移。您无法滚动到此div的底部。如果设置top: 0px;,一切正常。

body {
  font: 76%/150% Arial, Helvetica, sans-serif;
  color: #666;
  width: 100%;
  height: 100%;
}
#sidebar {
  position: fixed;
  top: 90px;
  left: 0;
  width: 20%;
  height: 100%;
  background: #EEE;
  overflow: auto;
}
#content {
  width: 80%;
  padding-left: 20%;
}
@media screen and (max-height: 200px) {
  #sidebar {
    color: blue;
    font-size: 50%;
  }
}
<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia libero eget mi rhoncus laoreet. In hac habitasse platea dictumst. Etiam placerat congue mi quis feugiat. Aliquam placerat sagittis consectetur. Nulla iaculis tincidunt leo vel luctus.
  Pellentesque euismod tincidunt diam, quis porta erat laoreet a. Mauris pellentesque purus ac eros elementum et rutrum orci iaculis. Morbi tincidunt posuere nulla a commodo. Curabitur eu ligula diam. Pellentesque fringilla, felis in tincidunt adipiscing,
  nisi eros consectetur felis, quis sollicitudin purus quam ut metus. Integer imperdiet nulla id diam ultricies ut ultricies nisl eleifend. Duis tortor tellus, laoreet nec pellentesque ut, euismod non lectus.</div>
<div id="content">Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
  et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
  aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut risus.
  Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.</div>

JSFiddle

我需要更改以保持top: 90px;并能够滚动到底部?

2 个答案:

答案 0 :(得分:1)

问题是#sidebarheight: 100%;。这意味着它将是视口的整个height,因此当您将top偏移90px时,div的底部会被切断。

解决此问题的一种方法是使用calc90px中删除height偏移量。

  • 修改#sidebarheight: 100%;更改为height: calc(100% - 90px);

&#13;
&#13;
body {
  font: 76%/150% Arial, Helvetica, sans-serif;
  color: #666;
  width: 100%;
  height: 100%;
}
#sidebar {
  position: fixed;
  top: 90px;
  left: 0;
  width: 20%;
  height: calc(100% - 90px);
  background: #EEE;
  overflow: auto;
}
#content {
  width: 80%;
  padding-left: 20%;
}
@media screen and (max-height: 200px) {
  #sidebar {
    color: blue;
    font-size: 50%;
  }
}
&#13;
<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia libero eget mi rhoncus laoreet. In hac habitasse platea dictumst. Etiam placerat congue mi quis feugiat. Aliquam placerat sagittis consectetur. Nulla iaculis tincidunt leo vel luctus.
  Pellentesque euismod tincidunt diam, quis porta erat laoreet a. Mauris pellentesque purus ac eros elementum et rutrum orci iaculis. Morbi tincidunt posuere nulla a commodo. Curabitur eu ligula diam. Pellentesque fringilla, felis in tincidunt adipiscing,
  nisi eros consectetur felis, quis sollicitudin purus quam ut metus. Integer imperdiet nulla id diam ultricies ut ultricies nisl eleifend. Duis tortor tellus, laoreet nec pellentesque ut, euismod non lectus.</div>
<div id="content">Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
  et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
  aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut risus.
  Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

请更改下面的css链接。 所以你的DIV固定在底部,顶部自动90px将打开。

&#13;
&#13;
#sidebar {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 20%;
    height: calc(100% - 90px);
    background: #EEE;
    overflow: auto;
}
&#13;
&#13;
&#13;