所以我一直在修补今天的大部分时间尝试不同的解决方案,而且我很难找到适用于浏览器的东西。
我想要创建的是固定div中的2个部分,第一部分具有静态高度,第二部分填充其余部分。每个都有一个按钮来切换它们的可见性,当第一个被隐藏时,第二个框将填充整个空间。从我能说的内容来看,这在浏览器中运行良好。
问题在于第二个框中的代码,在其中,将有一个标题,后面跟一个列表,这将自动调整大小但不缩小,然后是另一个标题,然后是第二个列表,但是有了这个列表,我希望它可以滚动,这就是我遇到的问题似乎。
正如您在第一张图片中看到的,它似乎在Chrome和MS边缘正常工作。然而它似乎在firefox和Safari中播放,因为它不会滚动,它只是从页面的末尾掉落,就像你在第二张图片中看到的那样。
如果有人能指出我正确的方向,这将是一个很大的帮助!
html,body {
height:100%;
width:100%;
margin:0;
}
.container {
position:fixed;
top:32px;
left:0;
right:0;
bottom:0;
width:220px;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.container * {
width:100%;
}
#box1 {
background:green;
height: 220px;
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
border: 2px solid yellow;
}
#box2 {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
border: 2px solid yellow;
}
.header {
background:red;
-webkit-flex: 0 0 24px;
-ms-flex: 0 0 24px;
flex: 0 0 24px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#list1 {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
background:orange;
}
#list2 {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
background:blue;
overflow-y:scroll;
overflow-x:hidden;
}
答案 0 :(得分:0)
这是一个跨浏览器工作的开始。
您需要为要定位的旧版浏览器添加带前缀的Flex属性。
html, body{
margin: 0;
}
.flex{
display:flex;
}
.flex.column {
flex-direction: column
}
.container{
margin-top: 32px;
height: calc(100vh - 32px);
}
.box {
background: green;
height: 100px;
}
.list1 {
background-color: orange;
}
.list2{
flex: 1;
background: lightblue;
overflow: auto;
}
<div class="flex column container">
<div class="box">
</div>
<div class="list1">
some header <br>
<ul>
<li>1</li>
<li>2</li>
</ul>
more text
</div>
<div class="list2">
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
</div>
</div>