时间戳

首页 > 解决方案 > 如何让 div 一直出现在屏幕上，即使其中没​​有内容

html - 如何让 div 一直出现在屏幕上，即使其中没​​有内容

问题描述

我想制作一个两个divs并排的标准框架。

.test {
  width: 100%;
  height: 100%;
}

.test22 {
  width: 100px;
  background-color: #000;
  border: 1px solid #000;
  height: 1000px;
}
<div class="test">
    <div class="test22">
    </div>
</div>

这是一个 JSFiddle：https ://jsfiddle.net/zvy0j3r1/

现在，正如您在 2nd 上看到的固定高度一样，div我可以在屏幕上看到带有黑色 bgcolor 的容器。但是我不能有一个固定的高度，因为内容是可变的，因此我改变了：height:100% 而不是固定的高度。

当我这样做时，我在屏幕上看不到任何东西，除了我添加的边框

JSFiddle：https ://jsfiddle.net/zvy0j3r1/1/

如果我在其中添加一些内容，它将开始显示：

JSFiddle：https ://jsfiddle.net/zvy0j3r1/2/

但我希望能够始终看到黑色容器，无论我是否有内容height: 100%？

这可能吗？

标签： htmlcss

解决方案

height: 100%意味着它将占用其父级高度的 100%。
在这种情况下，父块是 Body，它没有定义高度，所以它将是 100% 什么都没有。

您要做的第一件事是为body和html标签定义一个高度。

html,
body {
  height: 100%;
  margin: 0;
}

然后，使用min-height而不是height这样大小将始终适合其内容。

.test22 {
  min-height: 100%;
}


html,
body {
  height: 100%;
}

.test {
  width: 100px;
  min-height: 100%;
  background: #000;
}
<div class="test">
   
</div>

推荐阅读