html - 保持在其父级宽度内的固定 div？

Question

这是我主页的简化版本:

<div class="main">
    <div class="content"> all the content of my website </div>
    <div class="nav"> fixed on the screen and always visible </div>
</div>

这是相应的CSS:

.main {
    max-width: 500px;
    height: 2000px;
    margin: auto;
    background-color: grey;
}

.nav {
    width: 100px;
    height: 100px;
    background-color: blue;
    position:fixed;
    right: 0; /* that's the issue */
}

我希望固定元素保留在其父元素内(接触其父元素的右边缘)。但现在它正在触摸屏幕的右边界。

知道如何解决这个问题吗？谢谢!

Answer 1

你可以添加一个额外的元素来模拟主容器的属性，试试这个:

.main {
  max-width: 500px;
  height: 2000px;
  margin: auto;
  background-color: grey;
}
.nav {
  position:fixed;
  max-width:500px;
  width:100%;
}
.nav > div{
  width: 100px;
  height: 100px;
  background-color: blue;
  float:right;  
}

<div class="main">
  <div class="content">all the content of my website</div>
  <div class="nav"><div>fixed on the screen and always visible</div></div>
</div>