Question

我遇到这种情况：

.main-content {
  background-color:blue;
  width:100%;
  height:3000px;
}



.fixed-menu {
  height:50px;
  background-color:pink;
  position:fixed;
  bottom:20px;
  width:100%;
  padding:20px;

}

<div class="container">
  <div class="main-content">

  </div>
  <div class="fixed-menu">
    Fixed menu at the bottom. The main content should stop above this bar, so the bar never overlaps the content when scrolling.
  </div>
</div>

向下滚动时，粉红条不应与蓝色内容重叠。它应该表现得好像蓝色内容是距离页面底部60px的iframe，但没有使用iframe，只有css。

任何人都知道这是否可行？ https://jsfiddle.net/0e98os22/2/r

Answer 1

您可以做的是将您的内容放在top，left和right位于0，但bottom:50px的绝对div中。另一个div，您的菜单也是绝对的，bottom，left和right位于0，height: 50px。然后使用overflow:hidden禁用页面滚动条。

＆＃13;

html, body{
  height: 100%;
}

body{
  position: relative;  
  overflow: hidden;
}


.main-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  background: blue;
  overflow: auto;
}

.fixed-menu {
  background-color: pink;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
}

＆＃13;

<div class="main-content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.
</div>
<div class="fixed-menu">
  Fixed menu at the bottom.
</div>

＆＃13;

Answer 2

小提琴：https://jsfiddle.net/0e98os22/8/

模板：

<div class="container">
  <div class="main-content">
    <img src="http://i.imgur.com/RRUe0Mo.png" />
    <img src="http://i.imgur.com/RRUe0Mo.png" />
    <img src="http://i.imgur.com/RRUe0Mo.png" />
  </div>
  <div class="fixed-menu">
    Fixed menu at the bottom. The main content should stop above this bar, so the bar never overlaps the content when scrolling.
  </div>
</div>

CSS：

body, html, .container {
  height: 100%;
  overflow: hidden;
}

.container {
  position: relative;
}

.main-content {
  position: absolute;
  bottom: 100px;
  width: 100%;
  top: 0;
  overflow-y: auto;
}

.main-content img {
  width: 100%;
}

.fixed-menu {
  position:fixed;
  height:50px;
  background-color:pink;
  bottom:0px;
  width:100%;
  padding:20px;
}

更改网页上的主滚动区域以在远离视口底部的某个点停止。

2 个答案: