我有一个名为.side-el的div,我希望在某个位置:固定; 行为,但一旦我应用位置固定宽度交替从右边.正确的宽度将是flexbox设置的宽度.我怎样才能实现这个目标？
.container {
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
* {
box-sizing: border-box;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
}
.main-el {
box-sizing: border-box;
padding:0 2em;
width: 70%;
}
.side-el {
box-sizing: border-box;
width: 30%;
}<div class="container" style="background-color: blue; height: 100px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>Wyl*_*udd 42
这是一种灵感来自bootstrap的方法:
.fixed-top {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
}
这为您的柔性盒提供了呼吸空间,并且可以进行柔性盒式操作.如果您的flex-direction是列,则可以使用top, left, bottom.
这是有效的,因为当你给一个元素一个固定的位置和一个0 left和right0 top以及bottom0时,该元素被拉伸以从左到右或从上到下填充空间.这反过来允许弹性盒使用您期望的空间量而不固定位置.
o4o*_*hel 38
@Daniel,我知道这已经很晚了但是...虽然接受的答案是正确的,但我觉得这不是很有帮助.我有同样的问题(这是我遇到这个帖子的方式),我认为我将使用的解决方案是将位置固定元素包装在flex元素中.这是一个(非常丑陋)的例子
相关标记
<aside class="Layout-aside" ng-class="{'isCollapsed': collapsed}" ng-controller="AsideCtrl">
<div class="Layout-aside-inner">
<button ng-click="collapsed = !collapsed">
<span ng-show="collapsed">></span>
<span ng-hide="collapsed"><</span>
</button>
<ul class="Layout-aside-content">
<li ng-repeat="i in items">{{i}}</li>
</ul>
</div>
</aside>
相关的CSS
.Layout-aside {
order: 0;
min-width: 140px;
width: 140px;
background-color: rgba(0, 255, 0, .4);
transition: width .4s, min-width .4s;
}
.Layout-aside.isCollapsed {
min-width: 25px;
width: 25px;
}
.Layout-aside-inner {
position: fixed;
}
.Layout-aside.isCollapsed .Layout-aside-inner {
width: 25px;
}
.Layout-aside.isCollapsed .Layout-aside-content {
opacity: 0;
}
Rom*_*man 26
position:sticky Juozas Rastenis 上面提到过，但没有代码示例。这是一个极简的例子：
* {
box-sizing: border-box;
}
body {
display: flex;
margin: 0;
}
nav {
width: 20%;
height: 100vh;
top: 0; /* this is required for "sticky" to work */
position: sticky;
background: lightblue;
padding: 1rem;
}
main {
height: 3000px; /* cause scroll */
background: lightpink;
flex-grow: 1;
padding: 1rem;
}<body>
<nav>
sidebar here
</nav>
<main>
content here
</main>
</body>你可以用css替代它来实现它 position: sticky
它表现很好,但唯一的问题是浏览器支持(2018年6月):https: //caniuse.com/#feat=css-sticky
希望它很快好起来.
小智 5
一个简单得多的解决办法是使用overflow-y:scroll和height: 100vh开启main-el容器。这将使side-el容器具有固定位置的外观，而无需诉诸位置：fixed。