0

I am trying (with no success) use Semantic UI for application layout with list on the left that fills height of browser and scrolls its content AND form on the right that is fixed.

In pure HTML/CSS I would do it like this 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;
 }

I tried use Semantic UI Grid system and overflow+position:absolute list panel but it gets crazy Also putting Semantic UI components into layout from Fiddle makes lots of problems with inner components.

So, QUESTION: Is there a way to use Semantic UI CSS classes with extra styling to achieve responsive application layout with one list that fills height of browser and hides content with vertical scroolbar?

4

2 回答 2

0

我有一个可滚动的列表。但我上面只有一个静态表格。但由于没有其他答案，这可能会有所帮助： 在此处输入图像描述

代码如下所示：

<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;
}
于 2018-01-30T18:51:22.657 回答
0

自 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>
于 2019-07-19T23:16:35.447 回答