1

我正在尝试使用 Bootstrap 4.5 跨 3 列组织一些元素。

中心柱将有一个长的身体。

右列的内容（2 个 div）应该贴在顶部/底部。我很难让底部元素粘住。元素自动扩展，我希望它从底部自动扩展。

我在右列顶部使用 Tocify 作为我的 ToC。

左列有几个 div。顶部 div 是一个横幅，我想把它卡在那里。其余的 div 不太重要。根据视口的大小，此列可能会溢出，在这种情况下，我希望此左列有一个独立的滚动条。应该有 2 个独立的滚动条（网页滚动和左面板滚动）。

这是一个带有示例的引导加载小提琴（用很长的正文来演示问题）：https ://jsfiddle.net/x1nhrwtf/5/

<body>
  <div class="container-fluid">
    <main class="container py-3">
      <div class="row">

        <aside class="col-md-2">

          <div class="row banner sticky-top bg-white p-3">
            This will be some banner. Should always stick to the top.
          </div>
          <div class="scrollable-area hide-this-on-small-devices">
            <div class="row bg-white p-3">
              This column is <em>not</em> supposed to scroll along with the middle section, <em>unless</em> the elements are overflown (in which case, I want a separate scrollbar).
              <hr />
            </div>
            <div class="row bg-white p-3">
              This will have a search bar. Hide this on small devices.
            </div>
            <div class="row bg-white p-3">
              This will have announcements. Hide this on small devices.
            </div>
            <div class="row bg-white p-3">
              This will have BuiltWith. Hide this on small devices.
            </div>
          </div>
        </aside>

        <section class="content col-md-6">
          Lorem ipsum dolor sit amet...
        </section>

        <aside class="col-md-4">
          <div class="toc sticky-top bg-white p-3">
            <h3>ToC Section, sticky</h3>
            <hr />
            This is positioned correct, pretty much.
            Should stay at the top, even on small devices.
            This element auto-expands to 60% height.

            This is a Tocify style ToC:

            <div id="toc" class="pl-1"></div>
          </div>

          <div class="comments sticky-bottom bg-white p-3">
            <h3>Comment section</h3>
            <hr />
            This should stick to the bottom of the column (and page).
            This element auto-expands to 40% height.
          </div>

        </aside>
      </div>
    </main>
    <footer class="footer">Here is a footer. It should be stuck across the bottom. Why is it not there?</footer>

  </div>
</body>

CSS 尝试：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.toc {
  max-height: 60%;
}

.comments {
  max-height: 40%;
}

.scrollable-area {
  overflow-y: auto;
}
4

2 回答 2

1

这是我制定的解决方案。有三列的容器，溢出：隐藏和高度：100vh 以避免页面滚动。并且带有溢出滚动的三列允许并行滚动。

我认为您的其余要求都已满足。left 和 right 的顶部组件标记为灰色并位于顶部。评论保留在页面和列的底部。并且页脚是可见的。

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100vw;
  height: 100vh;
  border: solid 1px red;
  overflow: hidden;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  overflow: auto;
  padding: 3px;
}

.col-md-2 {
  width: 16.6666666667%;
}

.col-md-4 {
  width: 33.3333333334%;
}

.col-md-6 {
  width: 50%;
}

.center {
  background-color: green;
  text-align: justify;
}

.sticky-top {
  position: fixed;
  width: inherit;
  top: 0;
  background-color: gray;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
}

.scrollable-area {
  position: relative;
  z-index: -1;
}

.toc {
  height: 60%;
  max-height: 60%;
}

.comments {
  position: fixed;
  bottom: 0;
  z-index: -1;
  height: 40%;
  max-height: 40%;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
  background-color: black;
  color: white;
}
<div class="container">
  <div class="col left col-md-2">
    <div class="banner sticky-top">
      This will be some banner. Should always stick to the top.
    </div>
    <div class="scrollable-area hide-this-on-small-devices">
      <div class="row bg-white p-3">
        This column is <em>not</em> supposed to scroll along with the middle section, <em>unless</em> the elements are overflown (in which case, I want a separate scrollbar).
        <hr />
      </div>
      <div class="row bg-white p-3">
        This will have a search bar. Hide this on small devices.
        <hr />
      </div>
      <div class="row bg-white p-3">
        This will have announcements. Hide this on small devices.
        <hr />
      </div>
      <div class="row bg-white p-3">
        This will have BuiltWith. Hide this on small devices.
        <hr />
      </div>
    </div>
  </div>
  <div class="col center col-md-6">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu dui vivamus arcu. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Suscipit tellus
    mauris a diam maecenas. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Augue neque gravida in fermentum et sollicitudin ac. Amet purus gravida quis blandit turpis cursus in hac. Aenean pharetra magna ac placerat vestibulum. Quis
    ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Ut placerat orci nulla pellentesque dignissim enim sit amet venenatis. Lacus vestibulum sed arcu non odio euismod.<br> Amet venenatis urna cursus eget nunc scelerisque viverra.
    Sodales ut eu sem integer vitae justo eget. Tempor orci eu lobortis elementum. Dictum at tempor commodo ullamcorper a lacus. Vel facilisis volutpat est velit egestas dui id ornare. Urna duis convallis convallis tellus. Blandit massa enim nec dui nunc
    mattis enim ut. Quisque non tellus orci ac. Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse. Fermentum leo vel orci porta. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Elementum facilisis leo vel fringilla
    est ullamcorper eget. Condimentum lacinia quis vel eros donec ac. Felis eget velit aliquet sagittis id consectetur purus. Fringilla ut morbi tincidunt augue interdum velit euismod. Faucibus a pellentesque sit amet porttitor. Sapien eget mi proin sed
    libero enim sed. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus.<br> Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Elit duis tristique sollicitudin nibh sit. Risus commodo viverra maecenas accumsan lacus
    vel. Elementum sagittis vitae et leo duis ut diam. Mauris vitae ultricies leo integer malesuada nunc vel. Adipiscing tristique risus nec feugiat in fermentum posuere. Orci sagittis eu volutpat odio. Aliquet bibendum enim facilisis gravida neque convallis
    a. Eget lorem dolor sed viverra ipsum nunc. Orci eu lobortis elementum nibh tellus molestie nunc non. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida arcu ac tortor dignissim convallis aenean et. Tincidunt tortor aliquam nulla
    facilisi cras fermentum odio. Vel pretium lectus quam id leo in vitae turpis. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Sit amet commodo nulla facilisi nullam. Senectus et netus et malesuada. Id porta nibh venenatis cras sed felis
    eget.<br> Ultrices sagittis orci a scelerisque. Faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Id velit ut tortor pretium viverra suspendisse potenti nullam. Purus gravida quis blandit turpis cursus. Non curabitur gravida
    arcu ac tortor dignissim. Porta nibh venenatis cras sed. Gravida dictum fusce ut placerat orci nulla. Justo laoreet sit amet cursus sit amet dictum. Non diam phasellus vestibulum lorem sed risus. Non enim praesent elementum facilisis leo vel fringilla
    est ullamcorper.<br> Mattis aliquam faucibus purus in massa tempor nec feugiat nisl. Porta non pulvinar neque laoreet suspendisse interdum. Leo urna molestie at elementum. Aliquet porttitor lacus luctus accumsan. Arcu non sodales neque sodales ut.
    Vitae turpis massa sed elementum tempus egestas. Faucibus in ornare quam viverra orci sagittis. Sociis natoque penatibus et magnis dis parturient. Lacus suspendisse faucibus interdum posuere. Odio facilisis mauris sit amet massa vitae tortor condimentum
    lacinia.
  </div>
  <div class="col right col-md-4">
    <div class="toc sticky-top bg-white p-3">
      <h3>ToC Section, sticky</h3>
      <hr /> This is positioned correct, pretty much. Should stay at the top, even on small devices. This element auto-expands to 60% height.
    </div>
    <div class="comments sticky-bottom bg-white p-3">
      <h3>Comment section</h3>
      <hr /> This should stick to the bottom of the column (and page). This element auto-expands to 40% height.
    </div>
  </div>
</div>
<footer class="footer">Here is a footer. It should be stuck across the bottom. Why is it not there?</footer>

于 2020-06-22T04:03:38.027 回答
0

页脚仍然在那里（在底部）。我认为您没有看到它，因为 jsfiddle 的控制台覆盖了它。

在此处输入图像描述

于 2020-06-22T02:56:24.427 回答