Question

我有以下HTML：

<div class="glb-nav glb-nav-vertical glb-nav-left">
    <div class="glb-nav-top">
        <div class="glb-nav-logo">Example</div>
        <div class="glb-nav-left-arrow"></div>
        <div class="glb-nav-apps">
        </div>
        <div class="glb-nav-links">
        </div>
    </div>

    <div class="glb-nav-profile">
        <div class="glb-nav-profile-image"><img src="/images/Profile.svg" /></div>
        <div class="glb-nav-profile-name"></div>
    </div>

    <div class="glb-nav-social-icons">
        <div class="glb-nav-social-icon glb-nav-tw"></div>
        <div class="glb-nav-social-icon glb-nav-fb"></div>
        <div class="glb-nav-social-icon glb-nav-in"></div>
        <div class="glb-nav-social-icon glb-nav-lk"></div>
        <div class="glb-nav-social-icon glb-nav-pi"></div>
    </div>
</div>

它形成一个菜单。无论我们是否调整页面大小，我都需要始终在菜单底部显示glb-nav-social-icons和glb-nav-profile。我该怎么做呢？

我在考虑将以下css添加到glb-nav-top：

.glb-nav-top {
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 185px);
}

但在Firefox中，社交图标和配置文件并未显示在最底部（底部有一些间距）。

请注意，glb-nav有一个position: fixed

另请注意，当窗口高度变小时，我不希望底部与顶部重叠。底部应该向上移动，直到它到达顶部（glb-nav-top）div的底部。

Answer 1

我建议在这两个元素周围使用包装，并在其上设置position: absolute，bottom: 0和left: 0，将它们放在菜单底部，无论发生什么页面的其余部分。

在这个示例中，我将要在div中使用类abs向下推到底部的两个元素。然后我绝对将div放在其包含div的底部。

现场演示：

＆＃13;

.glb-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: blue;
  height: 200px;
}

.glb-nav-profile {
  background: red;
  height: 25px;
}

.glb-nav-social-icons {
  background: black;
  height: 50px;
}

.abs {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

＆＃13;

<div class="glb-nav glb-nav-vertical glb-nav-left">
  <div class="glb-nav-top">
    <div class="glb-nav-logo">Example</div>
    <div class="glb-nav-left-arrow"></div>
    <div class="glb-nav-apps">
    </div>
    <div class="glb-nav-links">
    </div>
  </div>

  <div class="abs">

    <div class="glb-nav-profile">
      <div class="glb-nav-profile-image"><img src="/images/Profile.svg" /></div>
      <div class="glb-nav-profile-name"></div>
    </div>

    <div class="glb-nav-social-icons">
      <div class="glb-nav-social-icon glb-nav-tw"></div>
      <div class="glb-nav-social-icon glb-nav-fb"></div>
      <div class="glb-nav-social-icon glb-nav-in"></div>
      <div class="glb-nav-social-icon glb-nav-lk"></div>
      <div class="glb-nav-social-icon glb-nav-pi"></div>
    </div>

  </div>
</div>

＆＃13;

JSFiddle版本：https://jsfiddle.net/6n1cw8tz/

Answer 2

这是使用flexbox而不是绝对定位的替代解决方案。在这种情况下，如果内容中有太多内容，导航的顶部将滚动。

现场演示：

.glb-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: blue;
  display: flex;
  flex-direction: column;
}
.glb-nav-profile {
  background: red;
  height: 25px;
}
.glb-nav-social-icons {
  background: black;
  height: 50px;
}
.glb-nav-top {
  flex-grow: 1;
  overflow: auto;
}

<div class="glb-nav glb-nav-vertical glb-nav-left">
  <div class="glb-nav-top">
    <div class="glb-nav-logo">Example</div>
    Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />Example Text
    <br />
    <div class="glb-nav-left-arrow"></div>
    <div class="glb-nav-apps">
    </div>
    <div class="glb-nav-links">
    </div>
  </div>

  <div>

    <div class="glb-nav-profile">
      <div class="glb-nav-profile-image">
        <img src="/images/Profile.svg" />
      </div>
      <div class="glb-nav-profile-name"></div>
    </div>

    <div class="glb-nav-social-icons">
      <div class="glb-nav-social-icon glb-nav-tw"></div>
      <div class="glb-nav-social-icon glb-nav-fb"></div>
      <div class="glb-nav-social-icon glb-nav-in"></div>
      <div class="glb-nav-social-icon glb-nav-lk"></div>
      <div class="glb-nav-social-icon glb-nav-pi"></div>
    </div>

  </div>
</div>

JSFiddle版本：https://jsfiddle.net/v8602cec/

如何在菜单的最底部显示div

2 个答案: