Question

我正在为现有网站开发一项功能，这是一个可以从左侧弹出的浮动全高侧边栏。

是否可以在不改变原始页面的标记和CSS的情况下开发它？理想情况下，我希望它可以作为一个插件，只需添加到现有页面。

我不需要JavaScript来让它从侧面滑入，我只是想为CSS建立最佳解决方案以确保它的全高。在侧边栏本身内，内容应该是可滚动的。

此示例代码应显示我想要实现的目标：

＆＃13;

body {
  background: #CCC; /* Ignore */
}

.bspec {
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
}
.bspec-content {
  display: table-cell;
  padding: 10px;
  overflow-y: scroll;
  max-height: 500px;
  background: #FFF;
  color: #666;
}
.bspec-toggle {
  display: table-cell;
  background: #F00;
  width: 20px;
  cursor: pointer;
}

＆＃13;

<html>

<body>

  <div class="content">
    <!-- Existing page markup, ideally left alone -->
  </div>

  <!-- Add sidebar to the page -->
  <div class="bspec">
    <div class="bspec-content">
      <p>Lorem ipsum dolor sit amet, ne doming probatus prodesset vel, ius no solet everti scaevola. Te quo dictas accumsan. Augue libris legendos duo te, pro ea postea intellegat. Mutat oporteat reformidans ea sit.</p>
      <p>Vel eius molestie necessitatibus ei. Veniam commune pertinacia ei cum, ex est graece laoreet adipisci. Qui esse argumentum ut, vix cu patrioque pertinacia. In vis unum evertitur intellegat, pro postea complectitur ad, eu sit mucius audiam scripserit.
        Alterum consulatu cu mei, nibh apeirian temporibus vix cu.</p>
      <p>Vel nisl causae aperiam cu, aeterno ponderum insolens ea cum, cum ei autem inani regione. Sea quodsi consequat ex. Ne wisi cotidieque vim, idque senserit ad qui. Choro noster civibus eu vix.</p>
      <p>No mel scripta equidem, sed ut senserit signiferumque. Eu vix volumus mediocrem molestiae, eu sensibus conclusionemque vis. Est unum laoreet et, nibh sadipscing mediocritatem mei an. Autem mollis at pro, qui et dolorum postulant. Veniam expetenda
        disputationi pro in, id eum exerci accusata. Vis ad nobis dicunt fabellas, te usu congue impedit vituperata. Ipsum possim assueverit et vel.</p>
      <p>Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet
        omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur.
        An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit
        perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua
        vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel
        te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes
        dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem.
        Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot
        graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea,
        cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis
        detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit
        liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.</p>
    </div>
    <div class="bspec-toggle">
      <!-- Clickable right edge of the pane, to bring the sidebar in -->
    </div>
  </div>
</body>

</html>

＆＃13;

备注

侧边栏应叠加在屏幕左侧。
补充工具栏应填充屏幕高度。
多余的侧边栏内容应滚动。
补充工具栏切换也应沿侧边栏内容的右侧运行全高。

Answer 1

对于侧边栏，您可以使用vh CSS单位作为最大高度。例如：

.Sidebar{
    max-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: scroll;
    width: /* your width here */;
}

您还可以将max-height与height交换为强制屏幕高度，同样的事情可以应用于切换按钮。

这假设您正在处理隐藏并显示此内容。

覆盖HTML页面上的浮动全宽侧边栏

1 个答案: