两个 div，一个滚动，另一个静态

Question

我正在创建一个博客网站，顶部显示最近的帖子，下方是显示所有博客帖子的部分。我将最新的帖子放在另一个 div 旁边，该 div 将显示最受欢迎的帖子、社交图标等。我想要做的是让侧边栏在最新帖子旁边保持静止，并使最近的帖子可滚动。我的代码导致侧边栏完全消失。当我将该部分与 CSS 一起调试时，一切正常。当我把它们放回原处时，侧边栏又消失了。

以下是可自行运行的相关代码：

/* relevant css */

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 0;
}

.maincontent {
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
}

.sidebar {
  position: fixed;
  float: right;
  /*top: 200px;*/
  left: 80%;
  width: 20%;
  height: 100%;
  z-index: 999;
  padding: 5px;
}


/* =============================================================================
	INDEX > RECENT POSTS
============================================================================= */

.description {
  text-align: justify;
}

.items .item .category2 {
  position: relative;
  margin-top: -10px;
  z-index: 2;
  margin-bottom: 20px;
  font: bold 18px/21px 'proxima_novasemibold';
}

.items .item .category2 a {
  display: inline-block;
  background: #B9B9C8;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 10px;
  text-decoration: none;
}

.items .item .category2 a:hover {
  color: #ffff00;
  text-decoration: none;
}

.social li a:hover {
  color: #FFFF00;
}

.social {
  text-align: center;
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}

.socialheading {
  font-weight: bold;
  display: inline-block;
  letter-spacing: -2px;
  padding-right: 15px;
}

.social>li {
  display: inline-block;
  padding-right: 1px;
  padding-left: 1px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- relevant HTML -->
<div class="wrapper">
  <div class="w3-row-padding w3-container">
    <div class="w3-content w3-col l9 maincontent">
      <div class="w3-row-padding w3-panel" onclick="javascript:window.location.href=''">
        <div class="items">
          <div class="w3-col l5">
            <div class="item">
              <div class="image">
                <a href="post.php?id=3&title=fightlikeagirl"><img src="http://via.placeholder.com/350x150" class="w3-image"></a>
              </div>
              <div class="category2">
                <a href="#">WELLNESS</a>
              </div>
            </div>
          </div>
          <div class="w3-col l7">
            <h3>TITLE</h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum sed arcu vel dignissim. Cras fermentum ullamcorper libero, non finibus ante rhoncus id. Nullam condimentum ornare neque, vitae vestibulum libero dignissim ut. Donec
              aliquam justo pretium, tempor libero vulputate, ultrices arcu</p>
            <p><a href="">read more</a></p>
          </div>
        </div>
      </div>
      <hr>

      <div class="w3-row-padding w3-panel" onclick="javascript:window.location.href=''">
        <div class="items">
          <div class="w3-col l5">
            <div class="item">
              <div class="image">
                <a href="post.php?id=3&title=fightlikeagirl"><img src="http://via.placeholder.com/350x150" class="w3-image"></a>
              </div>
              <div class="category2">
                <a href="#">WELLNESS</a>
              </div>
            </div>
          </div>
          <div class="w3-col l7">
            <h3>TITLE</h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum sed arcu vel dignissim. Cras fermentum ullamcorper libero, non finibus ante rhoncus id. Nullam condimentum ornare neque, vitae vestibulum libero dignissim ut. Donec
              aliquam justo pretium, tempor libero vulputate, ultrices arcu</p>
            <p><a href="">read more</a></p>
          </div>
        </div>
      </div>
      <hr>
    </div>

    <div class="w3-col l3 sidebar">
      <ul class="social">
        <p class="socialheading">KEEP IN TOUCH </p>
        <li><a href="" target="_blank"><span class="fa fa-facebook" aria-hidden="true"></span></a></li>
        <li><a href="" target="_blank"><span class="fa fa-instagram" aria-hidden="true"></span></a> </li>
        <li><a href="" target="_blank"><span class="fa fa-twitter" aria-hidden="true"></span></a></li>
        <li><a href="" target="_blank"><span class="fa fa-pinterest-p" aria-hidden="true"></span></a></li>
        <li><a href="" target="_blank"><span class="fa fa-linkedin" aria-hidden="true"></span></a></li>
        <li><a href="" target="_blank"><span class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
      </ul>
      <hr>
      <p class="socialheading">MOST POPULAR POSTS</p>
    </div>
  </div>
</div>

这是一个codepen，所有东西都放在一起但不起作用。

Answer 1

试试这个CSS sidebar 当它定位固定时，使用right:0 属性而不是left:80% 并使用bottom:0

CSS

.sidebar {
        position: sticky;
float: right;
right: 0%;
width: 20%;
bottom: 0;
height: 50%;
z-index: 999;
padding: 5px;
top: 0;
}

风格相应。

希望这会有所帮助..

Answer 2

发布一个示例以获得相同的效果

检查小提琴以更好地理解

fiddle

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.one {
  height: 300px;
  flex: 1 0 70%;
  background: tomato;
  overflow: auto;
}

.two {
  flex: 1 0 30%;
  background: green;
}

<div class="box">
  <div class="one">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quis velit, maiores quibusdam, odit obcaecati, ab repellendus vero nobis, beatae fugiat! Perferendis nulla, nisi, voluptatum sequi quasi asperiores nam praesentium?<br><br> Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit deleniti eum numquam eos, quisquam ducimus earum, sequi ad itaque cum quibusdam. Odit laudantium placeat perspiciatis voluptates dignissimos nulla excepturi.
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit deleniti eum numquam eos, quisquam ducimus earum, sequi ad itaque cum quibusdam. Odit laudantium placeat perspiciatis voluptates dignissimos nulla excepturi.
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit deleniti eum numquam eos, quisquam ducimus earum, sequi ad itaque cum quibusdam. Odit laudantium placeat perspiciatis voluptates dignissimos nulla excepturi.
  </div>
  <div class="two">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum repellendus numquam eum debitis. Quas iure quos, in placeat illo laudantium dignissimos officiis temporibus quibusdam fugit voluptatibus dicta provident ab impedit.
  </div>
</div>

Answer 3

您需要将top 添加到侧边栏（您已经有一个，但您对其进行了评论），然后侧边栏就在那里并固定，顶部，左侧，右侧和底部（只需要两个值）您可以修复位置