Question

一个难题。我有一个div，它是浏览器的全高，背景设置为100％，图像内容在两个内联div中设置，以使中间内容彼此垂直对齐。

其中一个div，图像比视口“大”（不幸的是，这是必需的），所以我发生了溢出：隐藏设置为这两个内部div的包含div以隐藏视口之外的任何东西（高度100％）

我知道它听起来很奇怪，所以我设置了一个CodePen

https://codepen.io/deelite310/pen/bjvKPG

我遇到的问题有几个：

1）由于图像的div高度大于div的全高，因此它导致了左div的内容与该全高“垂直对齐”，而不是包含DIV的100％高度。这意味着左侧的div内容在溢出区中消失了：隐藏；

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

所以我的问题是：

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

2）在主部分中的两个div都显示所有内容，尽管一侧的内容超出了并被溢出所隐藏：hidden;

我的一些CSS，您可以在上面的CodePen链接上看到整个内容

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%;}

Answer 1

要解决您的第一个问题，我会尝试将vertical-align（而不是float）添加到您的英雄和角色ID。顺便说一句，当您两次使用id col时，最好改用一个类。如果使用浮点数，则可能必须在页脚中添加clear，但这应该可以工作。并且，使用浮点数，将宽度减小一点（48％或49％而不是50％）会有所帮助，因为通过添加边框，您最终得到的宽度超过50％，这可以解释为什么第二个块位于第一个块之下

对于背景大小调整，您仍然可以使用background-size:100% 100%；请注意，使用这种方法，您的图像可能会显得怪异，在某些情况下最终会变形。

对于您的图片大小，我不太了解为什么您会使用nth-child。但是无论如何，您可以使用overflow:auto而不是overflow:hidden来显示滚动框，这意味着您的内容不会因为隐藏属性而消失。

这是我第一次在这里回答某人。希望对您有帮助...

DIV高度为100％，且内容在

1 个答案: