How to make grid column content fixed?

#1

Hello!

I have the following block on HTML:

<div id="page" class="ui grid">
    <div id="site-tree" class="three wide column"></div>
    <div id="page-content" class="ten wide column"></div>
    <div id="toc" class="three wide column"></div>
</div>

I want to make .site-tree and .toc columns have 100% of screen height and fixed. When I use postion: fixed for them, this break my site.

How can I do content of .site-tree and .toc columns fixed?

Best regards,
Andrey.

#2

use css as
height: 100%;
instead.

#3

The interesting question here is: what exactly do you mean by “fixed”?
If “fixed” means firmly attached to a fixed position, covering the left and right margins at any time, 100% of the height, while the content flows in a 10 wide column in the middle, here is what you can do (but the Semantic UI grid is not suitable for this purpose):

  <style>

  html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
  }
  #site-tree {
      background-color: #e0e0e0;
      position: fixed;
      top: 0px;
      height: 100%;
      overflow: hidden;
      left: 0px;
      width: 18%;
      padding: 1em;
  }
  #toc {
      background-color: #e0e0e0;
      position: fixed;
      top: 0px;
      height: 100%;
      overflow: hidden;
      right: 0px;
      width: 18%;
      padding: 1em;
  }
  #page-content {
      background: #f0f0ff;
      margin-left: 18%;
      width: 64%;
      padding: 1em 2em 1em 2em;
  }

and the HTML is simply three divs:

<div id="site-tree">
  <h2>Site Tree</h2>
  <p> Tree... </p>
</div>
<div id="toc">
  <h2>Stuff</h2>
  <p> More stuff... </p>
</div>
<div id="page-content">
    Lorem ipsum dolor sit...
</div>

With the proper media queries, you could make that responsive, so a mobile would maybe have the navigation tree as something flipping in from the left or right, while the toc is omitted or displayed on top.

Cheers,
–j.