Semantic UI Sidebar, частичная высота

Question

Semantic UI Sidebar, частичная высота

1

все!

Я пишу, потому что пытаюсь выяснить, как я буду делать следующее:

Я хочу написать приложение (Electron + Vue, специально), которое предлагает навигацию и прочее, используя боковую панель Semantic UI в левой части окна.

Дело в том, что я хочу, чтобы боковая панель была примерно 75-80% высоты окна, а нижняя 20-25% была статическим полем (я работаю над небольшим инструментом разработки для игры Steam, так что это поле будет содержать информацию о выбранном узле в семантическом меню).

Я прикрепил (действительно плохо нарисованный) образ, который служит примером того, что я надеюсь выполнить:

Во всяком случае, я не уверен, как это сделать, потому что я действительно не знаю, как бы я ограничил высоту компонента боковой панели (я собираюсь использовать версию Vue Component Semantic, в отличие от просто используя их CSS)

Любая помощь будет очень оценена.

Я думаю, возможно, это будет возможно с чем-то вроде Flex, но я не знаю.

Также есть возможность просто не использовать фактический компонент боковой панели вообще и просто делать элементы макета с поддержкой Flex для этого проекта.

Заранее спасибо!

MisutoWolf 23 сен. 2017, в 07:42

Источник

Теги:

javascript

vue.js

css3

flexbox

semantic-ui

1 ответ

Ещё вопросы

Nick Rucci · Accepted Answer · 2017-09-23T02-28-00.000Z

Это было бы идеально для чего-то вроде Flex. В основном вы можете иметь контейнер, содержащий два контейнера. Установите родительский элемент, чтобы выровнять их по вертикали и охватить ширину, как вам хотелось бы. Пример:

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;
}

Вот ручка, чтобы вы начали: https://codepen.io/potatogopher/pen/WZGBxZ

Это на самом деле довольно круто, наверное, мне следовало бы прочитать немного больше о Flex. Я не уверен, могу ли я содержать боковую панель Semantic UI в этом, но даже если я не могу, я все равно могу просто вручную сделать то, что мне нужно, используя неупорядоченные списки и различные обработчики событий в Vue. Спасибо! Принимая этот ответ, оцените, насколько быстро вы ответили. :)