填写剩下的屏幕

Question

我想要一个简单的页面，其中我有一个主要部分和一个左侧边栏，有两个部分。我不知道顶部的高度，我想底部部分填写屏幕的其余部分。你可以在下面的小提琴上看到（如果你看不到侧边栏，试着调整窗口的大小），高度100％设置条的高度加上它自己的高度，我希望它只填充其余的空间。我在这里发现了其他问题，人们建议使用vh减去顶部栏，但我不知道顶部栏的高度。还有其他选择吗？

请注意，如果内容占据屏幕高度，则底部必须支持滚动。

https://jsfiddle.net/segato/agprcbg0/2/

html,
body,
.wrapper,
.wrapper-inner,
.sidebar,
.main {
   height: 100%;
  }

Answer 1

只需删除定义的高度属性即可。所以：

#bot {
  background-color: red;
  margin: 0px !important;
  padding: 0px !important;
  overflow-y: hidden !important;
  overflow-x: hidden;
}

html, body, .wrapper, .wrapper-inner, .sidebar {
    height: 100%;
}

更新：https://jsfiddle.net/0da8b9oj/1/

Answer 2

您可以使用 Flexbox 进行此操作。重点是使vector<int> num; vector<int> Num; void convert(string text, string key) { Num.resize(key.length()); num.resize(text.length()); for (int i = 0; i < text.length(); i++) { char x = text.at(i); num[i] += int(x) - 97; cout << num[i] << endl; } for (int i = 0; i < key.length(); i++) { char y = key.at(i); Num[i] += int(y) - 97; cout << Num[i] << endl; } } div 具有灵活性，以便占用所有剩余的垂直空间。

Updated Fiddle