当设置为“固定”位置时，Leftnav会缩小宽度

时间：2016-01-14 15:53:01

标签： html css twitter-bootstrap css-position flexbox

我有一个主要内容区域和侧边栏，使用Bootstrap和Flexbox的组合创建。

enter image description here

我想通过滚动页面来修复导航栏，但是如果我应用position: fixed它就不再填充它的水平空间......

enter image description here

为什么会这样，我该如何解决这个问题呢？

The codepen is here.

更新

所选答案适用于codepen，但在真实网站中它只适用于窗口较小的情况，如iPad-portrait-size： enter image description here

在正常的桌面宽度下，leftnav不断变大...... enter image description here

2 个答案:

答案 0 :(得分：0)

您无法在同样属于position: fixed;布局的顶级元素上执行display:flex;。但是如果你有点聪明，你可以在孩子元素上使用position:fixed;。

你必须抛弃Bootstrap网格 - 它使用的是与flexbox不兼容的百分比和边距。 See my Codepen fork of your work

HTML：

  <div class="two-col-wrapper">
    <div class="leftnav">
      <div class="list-group list-group-fixed">
        <a class="list-group-item active" href="">Validate Address</a>
        <a class="list-group-item" href="">Get Postal Codes</a>
        <a class="list-group-item" href="">Get City/State/Province</a>
        <a class="list-group-item" href="">Get Candidate Address</a>
        <a class="list-group-item" href="">Auto Complete</a>
      </div>
    </div>
    <div class="main-content">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p>

    </div>
  </div>

CSS：

.two-col-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: row;

  .main-content {
    background-color: #ccc;
    padding: 90px 25px;
    flex-grow: 1;
   }

  .leftnav {
    background-color: #f1f1f1;
    padding: 90px 10px;
    flex: 2 0 200px;

    .list-group-fixed {
      position: fixed;
    }
  }
}

但请记住，你很聪明，所以有一个缺点 - per the W3C rules：

  

Flex容器的绝对定位子项不参与flex布局。

答案 1 :(得分：0)

您可以添加flex-shrink以减少空间。添加到.leftnav {} 

  flex-shrink: 7;

这是笔的分叉版本：http://codepen.io/mimoYmima/pen/wMqOmr

相关问题
最新问题