时间戳

首页 > 解决方案 > 没有任何溢出和顶部的位置粘性不起作用？

html - 没有任何溢出和顶部的位置粘性不起作用？

问题描述

我正在制作一个具有通用布局的整个网站，其中左侧有一个粘性 div（旁边的菜单）。该 div 必须是粘性的，因此它不会覆盖底部的页脚，但它的属性不起作用。

所以我到处搜索以找到解决方案：溢出，从上到下-左-右。overflow我也用脚本在旁边菜单的任何父母中搜索了任何内容，但我没有找到。

<div class="row">
        <aside id="menu">
                <div class="sticky" id="sticky">
                        <h2>Variabili</h2>
                        <a href="variables.html#variables">Tipi di variabili</a>
                        <a href="variables.html#var_scopes">Variabili locali e globali</a>
                        <h2>Funzioni</h2>
                        <a href="functions.html">Funzioni</a>
                        <h2>Classi</h2>
                        <a href="classes.html">Classi</a>
                </div>
        </aside>
        <article>
                <div id="variables" class="content">
                
                </div>
                <div id="var_scopes" class="content">
                
                </div>
        </article>
</div>
<footer>
        
</footer>

div.row {
    display: flex;
    padding-top: 3em;
}
aside#menu {
    display: block;
    flex: initial;
    width: 250px;
    min-width: 150px;
    margin: 0;
    font-size: 1rem;
    height: 100%;
    padding: 1rem;
    position: relative;
    float: left;
}
article {
    flex: 1;
}
aside#menu div.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

标签： htmlcss

解决方案

你有几个问题：

  1. 你height: 100%在#menu元素上设置。由于您没有在 上设置高度，因此row该元素没有参考 100% 的含义。因此，它使#menu元素成为其内容的高度，而不是容器的高度。这就是你看不到作品的主要原因sticky。
  2. 这不会影响元素，但您可以删除元素上的float: left和。那些不会做任何事情，因为它是一个 flex 子元素，并且默认情况下，一个元素是一个块元素。display: block#menuaside
  3. 您应该使用该flex属性来定义grow shrink and basis您的#menu和的属性article。

div.row {
  display: flex;
  padding-top: 3em;
}

#menu {
  flex: 1 1 250px;
  min-width: 150px;
  margin: 0;
  font-size: 1rem;
  padding: 1rem;
  position: relative;
}

article {
  flex: 1 1 auto;
}

#menu div.sticky {
  position: sticky;
  top: 0;
}

footer {
  height: 50px;
  background: yellow;
}
<div class="row">
  <aside id="menu">
    <div class="sticky" id="sticky">
      <h2>Variabili</h2>
      <a href="variables.html#variables">Tipi di variabili</a>
      <a href="variables.html#var_scopes">Variabili locali e globali</a>
      <h2>Funzioni</h2>
      <a href="functions.html">Funzioni</a>
      <h2>Classi</h2>
      <a href="classes.html">Classi</a>
    </div>
  </aside>
  <article>
    <div id="variables" class="content">
      <p>Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui
        nullam. Consequat luctus tempus.</p>

      <p>Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo
        mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id.
        Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.</p>

      <p>Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui
        nullam. Consequat luctus tempus.</p>

      <p>Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo
        mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id.
        Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.</p>

      <p>Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui
        nullam. Consequat luctus tempus.</p>

      <p>Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo
        mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id.
        Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.</p>
    </div>
    <div id="var_scopes" class="content">

    </div>
  </article>
</div>
<footer>

</footer>

推荐阅读