CODEWITHSUNDEEP
javascriptcssvue.jsflexboxsemantic-ui
MisutoWolf
MisutoWolf

Reputation: 1233

Semantic UI Sidebar, partial height

all!

I'm writing because I'm attempting to figure out how I'd go about the following:

I want to write an app (Electron + Vue, specifically) that offers navigation and stuff using a Semantic UI sidebar on the left hand side of the window.

The thing is, I want to only have the sidebar be about 75-80% of the window's height, with the bottom 20-25% being a static box (I'm working on a small development tool for a Steam game, so this box would contain information about a selected node on the Semantic menu).

I've attached a (really badly drawn) image that serves as an example of what I hope to accomplish:

Example Sketch

Anyway, I'm not sure how to go about this, because I don't really know how I'd go about restricting the height of the Sidebar component (I'm going to be using the Vue Component version of Semantic, as opposed to just using their CSS)

Any help would be -greatly- appreciated.

I'm thinking maybe this will be possible with something like Flex, but I dunno.

There's also the option of just not using an actual Sidebar component at all and just doing some Flex-enabled layout stuff for this project.

Thanks in advance!

Upvotes: 2

Views: 778

Answers (1)

Nick Rucci
Nick Rucci

Reputation: 1058

This would be perfect for something like Flex. You could basically have a container that contains two containers. Set the parent to align them vertically and span the widths how you would like. Example:

body {
  margin: 0;
}

.left-nav {
  width: 300px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.upper {
  width: 100%;
  height: 100%;
  background-color: red;
}

.lower {
  width: 100%;
  height: 40%;
  background-color: blue;
}

Here is a pen to get you started: https://codepen.io/potatogopher/pen/WZGBxZ

Upvotes: 1

Related Questions