有谁能提出新想法如何实现以下目标？如果一般可能）。
左侧面板的内容将使用Angular动态更改。因此，我们可以在面板上有几个项目，例如50个项目。根据这一点，面板的高度将更短或显示溢出隐藏。
这是小提琴草稿https://jsfiddle.net/b9on9gup/7/
首先，div class="filter-title"应填充100％的高度。
第二个标题容器不应该在滚动区域。滚动应位于div class="radio-container"内。您可以添加课程.shown
div class="main-container"显示底部面板。
附加条件是有和没有滚动（不同数量的项目，不同的屏幕分辨率等）的良好显示。
在小提琴中我尝试了不同的方式，因此一些css属性可能很奇怪。
<body>
<div class = "main-container">
<div class="left-panel">
<div class="filter-container">
<div class="table">
<div class="table-row">
<div class="radio-container">
<div class="overflow">
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
</div>
</div>
<div class="filter-title">
<span>
Filter title
</span>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-panel"></div>
</div>
</body>
html, body {
height: 100%;
padding: 0;
position: relative;
margin: 0;
}
.main-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
.left-panel {
top: 0;
left: 0;
bottom: 0;
width: 300px;
background: #fff;
position: absolute;
transition: bottom 0.5s ease;
.filter-container {
position: absolute;
background: #F6F6F6;
top: 50%;
transform: translateY(-50%);
width: 100%;
.table {
display: table;
width: 100%;
.table-row {
display: table-row;
height: 100%;
.radio-container {
display: table-cell;
padding: 25px 25px;
display: table-cell;
vertical-align: middle;
.overflow {
overflow-y: scroll;
max-height: 100%;
}
}
}
.filter-title {
display: table-cell;
width: 20px;
background: #539ACC;
vertical-align: middle;
span {
-webkit-writing-mode: vertical-lr;
white-space: nowrap;
}
}
}
}
}
.bottom-panel {
height: 200px;
position: absolute;
bottom: -200px;
background: #F6F6F1;
width: 80%;
left: 0;
right: 0;
margin: auto;
transition: bottom 0.5s ease;
}
&.shown {
.left-panel {
bottom: 200px;
}
.bottom-panel {
bottom: 0;
}
}
}
答案 0 :(得分：0)
更新
这是一个简单的javascript，您可以编辑以更好地满足您的需求...... 它会在必要时更改标题高度（它实际上会更改元素的宽度，因为它旋转了90度）
var ftitle = document.querySelector('.filter-title');
var radiocont = document.querySelector('.radio-container');
var w = ftitle.clientWidth;
var h = radiocont.clientHeight;
if (h > w) { ftitle.style.width = h + 'px';}.left-panel {
position: relative;
width: 150px;
}
/*
.radio-container {
height: 100px;
overflow: auto;
}
*/
.radio-container label {
display: block;
}
.filter-title {
background: #ddd;
text-align: center;
position: absolute;
top: 0; left: 0;
transform: translateX(170px) rotate(90deg);
transform-origin: 0 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class = "main-container">
<div class="left-panel">
<div class="radio-container">
<label>
<input type="radio" name="filterFieldsForm"/>
radio button1
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button2
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button3
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button4
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button5
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button6
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button7
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button8
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button9
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button10
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button11
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button12
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button13
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button14
</label>
</div>
<div class="filter-title">
<span>Filter title</span>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
我在案例中找到的最佳决策是使用max-height div class= "overflow"和媒体查询min-height。
我注意到如果要设置div class= "overflow"的最大高度，则会显示滚动。但是max-height应至少为'px'，而不是'％'。
对于不同的分辨率，最大高度也应该不同。我使用媒体查询为max-height设置了一些断点。像这样：
@media(min-height:520px) {
max-height: 170px;
}
@media(min-height:600px) {
max-height: 250px;
}
@media(min-height:768px) {
max-height: 400px;
}
@media(min-height:900px) {
max-height: 500px;
}
.....
它允许我在任何分辨率下让面板的高度比浏览器视图的高度短，并且在面板内部具有或不具有滚动（取决于项目的数量）
过滤标题+ text-overflow
以下是视频 - http://take.ms/WBDcy
这是代码 - http://plnkr.co/edit/SbMa9Ece2eOPJ2C0Lt5U?p=preview
当我写这篇文章时，我明白使用max-height: 80vh可能比媒体查询更好。它应该进行测试。