Html 多个CSS问题，DIV高度100%，内容在

这是个难题。我有一个div是浏览器的全高，背景设置为100%大小，图像内容在两个内联div中设置为垂直对齐中间内容

其中一个div，图像比视图端口大。很遗憾，这是必需的，因此我将overflow:hidden设置为这两个内部div的包含div，以隐藏视口高度100%以外的内容

我知道这听起来很奇怪，所以我设置了一个密码笔

我遇到的问题有几个：

1右div内容因为图像大于div全高，它导致左div内容与该全高垂直对齐，而不是包含div的100%高度。这意味着左div内容正在溢出中消失：隐藏

2当上下调整浏览器大小（例如1680x600的查看端口）时，主部分中的内容被页脚区域覆盖，因此图像消失或被覆盖，背景没有向下调整大小，等等

因此，我的问题是：

1如果浏览器不是正常的视口设置（如1680x600），请调整div和content的大小，以便主部分完全显示，而不会被页脚覆盖

2如果主节中的两个div都显示所有内容，尽管其中一方的内容超出了主节并被溢出隐藏：隐藏

我的一些CSS，你可以在上面的代码笔链接上看到全部内容

section {
  width: 100%;
  min-height: 100%;
  display: table;
  height: inherit;
  margin: 0;
  padding: 0;
  background: url("https://placeimg.com/1000/400/tech/sepia") no-repeat center    top;
  background-size: 100%;
}
#hero #col {display: inline-block; width: 50%; verticle-align: middle;}
#hero #col:nth-child(1) img {width: 65%; height: auto;}

.place {margin-bottom: 20%;}

#footer {width: 100%; height: 400px; text-align: center; border-top: 1px solid #000}
#footer p {font-weight: bold; font-size: 32px; margin-top: 3%;}

---

为了解决您的第一个问题，我会尝试，而不是垂直对齐，添加一个浮动到您的英雄和列id。顺便说一句，由于您使用id列两次，因此可能适合使用类。 如果使用float，您可能需要在页脚中添加一个clear，但它应该可以工作。使用浮动，将宽度从50%减少到48%或49%应该会有所帮助，因为通过添加边框，最终的宽度将超过50%，这可以解释为什么第二个块位于第一个块之下

对于背景大小调整，您仍然可以使用背景大小：100%100%；请注意，使用这种方法，您的图像可能看起来很奇怪，在某些情况下，它最终会失真

对于你的图片大小，我真的不明白你为什么要使用第n个孩子。但是，无论如何，您可以使用overflow:auto而不是overflow:hidden，这将允许滚动框出现，这意味着您的内容不会像hidden属性那样简单地消失

这是我第一次在这里回答别人的问题。希望对你有帮助