兩個div，一個卷軸，其他靜態

Question

我正在創建一個博客網站，頂部顯示最近的帖子，下面是顯示所有博客文章的部分。我最近發佈了另一個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; 
 
} 
 

 

 
/* ============================================================================= 
 
\t 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

您需要將top添加到側邊欄（您已經有一個，但您已評論它），然後邊欄在那裏，並固定，頂部，左側，右側和底部（只需要兩個值），您可以修復位置

Answer 3

發佈一個例子來獲得相同的

檢查小提琴更好地瞭解

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>