Question

我正在尝试（没有成功）使用语义UI进行应用程序布局，左侧列表填充浏览器的高度并在右侧滚动其内容和表单。

在纯HTML / CSS中，我会像这样的jsFiddle：http://jsfiddle.net/yoorek/qFFvY/

<body ng-app="app" ng-controller="AppController">
<div class="row header">HEADER</div>
<div class="row body">
    <div class="left col vscroll">
        <ul>
            <li ng-repeat="item in data">
                {{ item }}
            </li>
        </ul>
    </div>
    <div class="right col vscroll">
        Form
    </div>
</div>
<div class="row footer">FOOTER</div>

CSS：

    body {
     margin: 0
 }
 .row, .col {
     overflow: hidden;
     position: absolute;
     border: dotted 1px red;
 }
 .left {
     width: 30%;
 }
 .right {
     left: 30%;
     right: 0px;
 }
 .row {
     left: 0;
     right: 0;
 }
 .col {
     top: 0;
     bottom: 0;
 }
 .vscroll {
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 }
 .body.row {
     top: 40px;
     bottom: 40px;
 }
 .footer.row {
     bottom: 0;
     height: 40px;
 }

我尝试使用语义UI网格系统和溢出+位置：绝对列表面板，但它变得疯狂将语义UI组件放入Fiddle的布局中会使内部组件出现很多问题。

所以，问题：有没有办法使用具有额外样式的语义UI CSS类来实现响应式应用程序布局，其中一个列表填充浏览器高度并使用垂直scroolbar隐藏内容？

Answer 1

我有一个可滚动的列表。但我只有一个静态表格。但由于没有其他答案，这可能会有所帮助：

代码如下：

<div>
 <div class="ui main fixed borderless menu">
      <div class="ui item">
 ... static form
    </div>
 </div>
 <div class="ui main text container">
      <div id="log-panel" class="ui relaxed divided list">
    <div class="item">
   ... list item
    </div>
    <div class="item">
   ...
    </div>
...
   </div>
  </div>
</div>

只需要一点额外的CSS：

#log-panel {
    padding-top: 7em;
    max-height:calc(100vh - 4em);
    overflow: auto;
}

Answer 2

自2017年7月3日起，提供了“滚动内容”样式。请参见https://github.com/Semantic-Org/Semantic-UI/issues/4335

中的结束语

这可能会帮助您进行全页控制，而无需额外的CSS。

模式示例：

<div class="ui modal">
  <div class="header">Header</div>
  <div class="scrolling content">
    <p>Very long content goes here</p>
  </div>
</div>

语义UI和溢出

2 个答案: