0

私は（成功せずに）アプリケーションレイアウトにセマンティック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;
 }

Semantic UI Grid システムと overflow+position:absolute リスト パネルを使用してみましたが、おかしくなりました。 また、セマンティック UI コンポーネントを Fiddle からレイアウトに配置すると、内部コンポーネントで多くの問題が発生します。

では、質問: Semantic UI CSS クラスを追加のスタイルで使用して、ブラウザーの高さを埋め、垂直スクロールバーでコンテンツを非表示にする 1 つのリストでレスポンシブなアプリケーション レイアウトを実現する方法はありますか?

4

2 に答える 2

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 に答える