html - div 高度为 100% 但带有标题行的 Div?

标签 html css

<分区>

所以,首先,我想说,我知道存在类似的问题,但这些都没有帮助我。

我只想创建一个框架,在一个标题中有 50 像素,另一个框架在这个“容器”中,高度为 100%。

但这行不通。

我已经尝试创建多个容器作为 div 等。 http://prntscr.com/ohshyn这是当前的结果。

...这是我当前使用的代码。

body {
  background-color: black;
}

.container {
  width: 500px;
  height: 500px;
  background-color: red;
  padding: 10px;
}

.top {
  width: 100%;
  height: 50px;
  background-color: green;
}

.bottom {
  width: 100%;
  height: 100%;
  background-color: blue;
}
<div class="container">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

我想看起来像这样:http://prntscr.com/ohsip9

最佳答案

你的 .bottom 类高度不应该是 100%,它应该是 100% - 50px(.top class height)。用 calc 函数添加 .bottom 类高度,这样就可以了。

height: calc(100% - 50px);

关于html - div 高度为 100% 但带有标题行的 Div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57127915/

上一篇:css - 如何在动画期间修复按钮的堆叠/z-index?

下一篇:html - 电子邮件输入字段宽度仅随内联样式变化

相关文章:

javascript - 包含图像的 jQuery UI 工具提示位置错误

jQuery load() 在 div 中显示 css 预加载器

html - CSS:将 img 相对于 div 对齐

html - 使用 Bootstrap 如何并排排列两个文本框

html - 页面左侧的空白使用仅 CSS 布局

jquery - 当我悬停另一个元素时,如何将悬停样式应用于 div?

html - css:为什么文本会在删除位置后向上移动:绝对

html - 垂直对齐内联列表项

.net - GridView 的 RowStyle-Horizo​​ntalAlign 属性不应该覆盖 CSS 的文本对齐属性吗?

css - 为什么 flexbox 代码在 Safari 5 和 6 中不起作用?