web-dev-qa-db-ja.com

セマンティックUIグリッドの列の高さ

Show fiddle のように、3番目の紫色の行の内側に.vertical pointing menuを配置する単純なグリッドベースのレイアウトを構築しています。 3列目の高さがビューポートの100％を占めるようにする正しい方法はどれですか？本体とポインティングメニューの高さを100％に設定してみましたが、うまくいきませんでした。その行の高さは、コンテンツの高さ、この場合はメニューの高さによって決まります。

htmlcsssemantic-ui
10
Nedo

次のコードスニペット（およびjsfiddle）は、 Semantic-UI Issues ページから抜粋したもので、同じユーザーが同じ質問をしました。

<style>
    html, body {
        height: 100%;
    }

    .ui.grid {
        height: 100%;
    }
</style>

<div class="ui padded equal height grid">
  <div class="two wide purple column">
  </div>
  <div class="fourteen wide stretched column">
    <div class="ui equal height grid">
      <div class="sixteen wide red column"></div>
      <div class="eight wide orange column"></div>
      <div class="eight wide blue column"></div>
    </div>
  </div>
</div>

http://jsfiddle.net/ea04tkwo/

11
Jan