带有溢出滚动条的垂直响应面板

Question

谁能给出新的想法如何实现以下内容？如果通常可能的话）。

左侧面板的内容将随 Angular 动态变化。因此，面板上可以有多个项目，例如 50 个项目。相应的，panel的高度会变短或者显示overflow hidden。

这是fiddle草稿https://jsfiddle.net/b9on9gup/7/

首先 div class="filter-title" 应该填充 100% 高度。第二，标题容器不应该在滚动区域。滚动条应该在 div class="radio-container" 内。您可以添加 class .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;
        }
    }
}

Answer 1

更新

这是一个简单的 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>

http://jsbin.com/wiyuhu/edit?css,js,output

Answer 2

在我的案例中，我发现的最佳决定是将 max-height 用于 div class= "overflow" 和媒体查询 min-height。我注意到如果为 div class= "overflow" 设置最大高度，则会显示滚动条。但是 max-height 应该至少在 'px' 中，而不是在 '%' 中。对于不同的分辨率，最大高度也应该不同。我使用媒体查询为最大高度设置了一些断点。像这样：

@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;
} 
.....

它允许我在任何分辨率下让面板的高度比浏览器视图的高度短，并允许我在面板内滚动或不滚动（取决于项目的数量）同样的方法也适用于过滤器 title + text-overflow

这是视频 - http://take.ms/WBDcy

这是代码 - http://plnkr.co/edit/SbMa9Ece2eOPJ2C0Lt5U?p=preview

当我写这篇文章时 post 我明白使用 max-height: 80vh 可能比媒体查询更好。应该测试一下。

带有溢出滚动条的垂直响应面板

Vertically responsive panel with overflow scroll

html

css

panel

vertical-scroll