Semantic ui left menu taking too much space

Question

I am trying to make a dashboard structure using semantic-ui.

I have no other CSS than semantic-ui, and I don't load any Javascript (not even from semantic-ui), since I use react to manage the lifecycle of the elements.

I am trying to have :

The "About" page that occupies the orange part of the screen, and more (instead of the menu taking up the orange part as well).
a footer that sticks to the bottom

Here is the structure of the page (react data removed) :

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
    <div class="app-wrapper" id="app">
       <div>
          <div>
             <div id="header">
                <div class="header page">
                   <div class="container ui">
                      <div href="#" class="floated icon menu right text ui">User</div>
                      <div class="menu text ui">
                         <a href="geodb.io/home" class="icon item"><i class="emphasized github huge icon mark"></i></a>
                         <a class="item">
                            <div class="input labeled small ui user">
                               <div class="label ui">This project</div>
                               <input type="text" placeholder="search">
                            </div>
                         </a>
                         <a href="#" class="item">Home</a>
                      </div>
                   </div>
                </div>
             </div>
             <div id="menu">
                <div class="menu pointing secondary ui vertical">
                   <div><a href="/" class="item">index</a><a href="/faq" class="item">faq</a><a href="/about" class="item active">about</a></div>
                </div>
             </div>
             <div class="container content main text ui">
                <div class="dividing header ui">about</div>
                <div id="view">
                   <div>About page</div>
                </div>
             </div>
             <div id="footer">
                <div class="footer">
                   <div class="divider section ui"></div>
                   <div class="container ui">
                      <div class="disabled item">Copyright</div>
                      <i class="github icon large mark"></i>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>

Not sure if this link will help you, trying to reproduce your code in a local thing, but here's what i found. (https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) — Cas Nouwens, Feb 22 '16 at 09:15

score 1 · Accepted Answer · edited May 23 '17 at 12:13

edit Sources:

Alright, so I did some testing and found this.

I'm assuming your code example is a direct child of the <body> tag,

My changes:

removed two classless, idless wrapper divs between your div.app-wrapper and the div.header
added class Site to app-wrapper
added class .site-content to .container.content.main

if you leave those two in place, the footer won't stick at the bottom. Here's the CSS for this code

.Site {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }

    .Site-content {
        flex: 1;
    }

    #footer {
        background-color: #333;
        width: 100%;
        bottom: 0;
        position: relative;
    }

That's how it works in my local enviroment.

Feedback is appreciated

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.Site-content {
  flex: 1;
}
#footer {
  background-color: #333;
  width: 100%;
  bottom: 0;
  position: relative;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<div class="app-wrapper Site" id="app">
  <div id="header">
    <div class="header page">
      <div class="container ui">
        <div href="#" class="floated icon menu right text ui">User</div>
        <div class="menu text ui">
          <a href="geodb.io/home" class="icon item"><i
                                class="emphasized github huge icon mark"></i></a>
          <a class="item">
            <div class="input labeled small ui user">
              <div class="label ui">This project</div>
              <input type="text" placeholder="search">
            </div>
          </a>
          <a href="#" class="item">Home</a>
        </div>
      </div>
    </div>
  </div>
  <div id="menu">
    <div class="menu pointing secondary ui vertical">
      <div><a href="/" class="item">index</a><a href="/faq" class="item">faq</a><a href="/about" class="item active">about</a>
      </div>
    </div>
  </div>
  <div class="container content main text ui Site-content">
    <div class="dividing header ui">about</div>
    <div id="view">
      <div>About page</div>
    </div>
  </div>
  <div id="footer">
    <div class="footer">
      <div class="divider section ui"></div>
      <div class="container ui">
        <div class="disabled item">Copyright</div>
        <i class="github icon large mark"></i>
      </div>
    </div>
  </div>
</div>

Thanks I will try that this evening. In the meantime I can have a look if you make your code runnable ( https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ ). +1 for the sources as well, it looks simple enough — nha, Feb 22 '16 at 09:39
@nha Edited my question to include the snippet thing. it works for me. (+1? what's that mean? I'd assume upvote, but assumptions are bad) — Cas Nouwens, Feb 22 '16 at 09:46
..and accepted the answer since it runs on the snippet it should be fine. — nha, Feb 22 '16 at 09:48

Semantic ui left menu taking too much space

1 Answers1