0

我有两个兄弟元素（navBar和content），其中最左边的元素（navBar）应根据其子元素（ menu ）调整其宽度。
但是，菜单需要固定：它的宽度可以改变，因此内容元素也需要动态改变。

问题是当菜单被修复时，它不再在文档流中。当这种情况发生时，navBar的宽度会缩小，这会导致内容元素的宽度增加。

那么如何在不手动设置宽度的情况下让navBar识别其固定子元素的宽度呢？

.menu {
  position: fixed;
}
<div class="container">
  <div class="navBar">
    <div class="menu"></div>
  </div>
  <div class="content"></div>
</div>

在此处输入图像描述

4

2 回答 2

2

也许固定定位并不是您真正需要的。position:sticky可能更多的是你所追求的。

  .container {
  margin: 1em auto;
  border: 1px solid green;
  height: 2000px;
  display: flex;
}

.navbar {
  padding: 1em;
  margin-right: 1em;
  background: lightblue;
}

.navbar nav {
  background: pink;
  position: sticky;
  top: 1em;
}

.content {
  background: rebeccapurple;
  flex: 1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  list-style: none;
<div class="container">
  <div class="navbar">
    <nav>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 50000</li>
      </ul>
    </nav>
  </div>
  <div class="content"></div>
</div>

于 2018-07-10T15:58:36.733 回答
0

这是一个改编自 Pauli_D 的解决方案，使用flexbox导航栏没有任何定位。请注意，content容器具有overflow: auto允许滚动的属性。

* {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
}

.navbar {
  padding: 1em;
  background: lightgrey;
  flex: 1 1 auto;
}

.navbar li {
  white-space: nowrap;
}

.content {
  background: lightblue;
  flex: 1 1 auto;
  overflow: auto;
  padding: 1em;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
<div class="container">
  <div class="navbar">
    <nav>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 50000</li>
      </ul>
    </nav>
  </div>
  <div class="content">
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut elementum metus. Nam odio tellus, eleifend eget felis et, facilisis commodo erat. Mauris euismod diam ipsum, nec dapibus risus rhoncus ac. Aliquam consectetur velit vel nisl efficitur elementum. Morbi mattis sapien id sagittis aliquam. Praesent porttitor ex velit, eu suscipit magna iaculis mattis. Quisque tristique, neque vitae dictum imperdiet, tellus tellus volutpat diam, ut vulputate velit magna a metus. Phasellus id libero ipsum. Morbi nec lacinia enim. Nulla placerat egestas ipsum sit amet porttitor. Nunc ipsum magna, ultrices et suscipit ut, ullamcorper sit amet dui. Donec in nunc blandit, accumsan mi non, porta magna.<br/><br/>

Vivamus varius eu metus a posuere. Donec efficitur ligula non risus ultrices, at faucibus turpis congue. Etiam eget risus sit amet neque dapibus sodales sed quis justo. Nullam molestie felis in urna dapibus, eget tempor nisl ornare. Curabitur suscipit lorem eu nisi lobortis condimentum. Phasellus in nisi id lacus scelerisque rhoncus a sed nunc. Mauris dapibus ullamcorper pellentesque. Mauris id elit in est mollis egestas vulputate tristique est. Fusce vel urna sapien. Ut rutrum condimentum quam, non rutrum quam tincidunt eget. Praesent mattis turpis id eros efficitur, non aliquam ligula sagittis.<br/><br/>

Mauris lacus mauris, lacinia eu tempor eget, porta id odio. Nulla imperdiet et nulla sed malesuada. Praesent vehicula, ligula eget posuere varius, ex lorem lacinia ante, ut egestas urna nunc eget mauris. Vivamus malesuada est sit amet libero laoreet lacinia. Nulla blandit leo sed velit egestas, eu molestie lectus venenatis. Mauris semper sapien ac lorem pretium, id dapibus leo molestie. Donec sem ante, egestas sed dignissim eget, dapibus vitae elit. Suspendisse potenti. Aenean dictum laoreet tellus, id blandit eros interdum id.
  </div>
</div>

于 2018-07-10T16:20:47.960 回答