Semantic-UI上的完整页面网格

Question

我使用的是Semantic-UI库，我遇到了一些问题。

我使用当前拥有的HTML和CSS创建了以下fiddle。然而，由于结果的高度限制，我试图解决的问题在小提琴中是不可见的。

下图显示了我的问题。我想要实现的是使网格占据页眉和页脚之间的整个空间。我已经使用了height: 100%但是在内容中的所有元素之间创建了一个宽阔的空间。

任何帮助都将很高兴。

Answer 1

只需处理您的CSS即可进行您想要实现的更改。在您的代码中，我将 .ui.container 的高度设置为100％，并将其转换为 .ui.segment 。请查看以下代码供您参考。

＆＃13;

＆＃13;

play()

＆＃13;

body {
  display: flex;
  height: 100%;
  flex-direction: column;
}
header {
  padding: 0.25em;
}
footer {
  padding-bottom: 1.5em !important;
}
main.content {
  background-color: #f2f2f2;
  flex: 1 0 auto;
  width: 100%;
}

/* Header */
header.ui.secondary.menu {
  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  margin-bottom: 0em;
}
header.ui.secondary.menu .item,
header.ui.secondary.menu .dropdown.item {
  font-weight: bold;
  margin: 0;
}
header.ui.secondary.menu .item:hover,
header.ui.secondary.menu .dropdown.item:hover {
  background: rgba(0, 0, 0, 0);
  color: #21BA45;
}
header.ui.secondary.menu .active.item {
  background: rgba(0, 0, 0, 0);
  color: #21BA45;
}
header.ui.secondary.menu .item {
  padding-right: 0;
  padding-left: 1.42857142em;
}
header.ui.secondary.menu .item:first-child {
  padding-left: 0;
}
header.ui.secondary.menu .item > i.icon,
header.ui.secondary.menu .item > i.dropdown.icon {
  margin: 0 0.25em;
}
header.ui.secondary.menu .disabled.item {
  padding-right: 1.42857142em;
}

/* Footer */ 
footer.ui.segment {
  padding: 0 1em 1em;
}
footer > .ui.divider {
  margin: 0 0 1rem;
  color: rgba(34, 36, 38, 0.15);
}

/* Full Grid */
.ui.full.grid {
  background-color: #ffffff;
  border-left: 1px solid rgba(34, 36, 38, 0.15);
  border-right: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.container{
  height:100%;
  border-radius:0;
}

＆＃13;

＆＃13;

＆＃13;