任何人都可以提供新的想法来实现以下内容吗？如果通常可能的话)。
左面板的内容将随 Angular 动态变化。因此，面板上可以有多个元素，例如 50 个元素。相应地，面板的高度将变短或显示溢出隐藏。
这是 fiddle 草稿 https://jsfiddle.net/b9on9gup/7/
首先，div class="filter-title" 应该填充 100% 高度。
第二，标题容器不应该在滚动区域。滚动应该在 div class="radio-container" 内。您可以添加类 .shown
div class="main-container" 显示底部面板。
附加条件是滚动和不滚动显示都很好(不同数量的元素，不同的屏幕分辨率等)。
在 fiddle 中，我尝试了不同的方式，所以一些 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;
}
}
}
最佳答案
更新
这是一段简单的 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>关于html - 带有溢出滚动条的垂直响应面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31568226/