Chrome滚动条调整html大小答案

【问题标题】：Chrome scrollbars resize htmlChrome滚动条调整html大小
【发布时间】：2018-05-11 07:18:14
【问题描述】：

这只会发生在 Chrome 中，而不是 Firefox 或 IE -

我有三张带有文字的图像。这三个图像是响应式的，占据了浏览器窗口的整个宽度。截图如下：

当我调整窗口大小以使其更窄时，不知何故，html 变得小于页面大小。例如，这里：

这只会在窗口似乎重新调整之前很快发生，一切都很好。但是，我仍然想修复它。

我尝试使用 flexbox 页脚而不是 vh 方法，但这没有帮助。

我的 HTML 和 CSS 在下面。关于 HTML 的注释——我确信除了像这样将 HTML 全部塞在一起之外，还有另一种方法可以让三张图片组合在一起而没有任何空格——很抱歉成为一个黑客。但这不是问题的根源，据我所知 - 当只有一张图片时也会发生这种情况。

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width">
      <link href="styles/index-footer-test-750.css" type="text/css" rel="stylesheet">
      <title>Good Boy Dog Care</title>
  </head>
  <body>
      <div class="index-content">
        <div id="we-love-dogs-one"><img id="we-love-dogs-one-image" src="images/cute-dog-one-cropped.jpg"><div id="we-love-dogs-one-text"><p>WE</p></div></div><div id="we-love-dogs-two"><img id="we-love-dogs-two-image" src="images/cute-dog-two-cropped.jpg"><div id="we-love-dogs-two-text"><p>LOVE</p></div></div><div id="we-love-dogs-three"><img id="we-love-dogs-three-image" src="images/cute-dog-three-cropped.jpeg"><div id="we-love-dogs-three-text"><p>DOGS</p></div></div>
      </div>
      <div class="footer">
      </div>
    </body>
</html>

还有 CSS：

    * {
    box-sizing: border-box;
    margin: 0;
}

.index-content {
    min-height: calc(100vh - 2em);
    padding: 0;
    margin: 0;
}

.footer {
    height: 2em;
    background-color: rgba(240, 100, 60, 1);
    width: 100%;
    cursor: default;
}

   #we-love-dogs-one {
        width: 34%;
        display: inline-block;
        margin: 0;
        position: relative;
        text-align: center;
    }

        #we-love-dogs-one-image {
        width: 100%;
        height: auto;
        display: block;
        float: left;
    }

        #we-love-dogs-one-text {
        left: 0;
        position: absolute;
        width: 100%;
        color: white;
        top: calc(50% - 17px);
        font-size: 1.5em;
        display: inline-block;
        font-family: "Montserrat";
    }

    #we-love-dogs-two {
        width: 33%;
        display: inline-block;
        margin: 0;
        position: relative;
        text-align: center;
        font-family: "Montserrat";
    }

    #we-love-dogs-two-image {
        width: 100%;
        height: auto;
        display: block;
        float: left;
    }

    #we-love-dogs-two-text {
        left: 0;
        position: absolute;
        width: 100%;
        color: white;
        top: calc(50% - 24.5px);
        font-size: 2em;
        display: inline-block;
        font-family: "Montserrat";
    }

        #we-love-dogs-three {
        width: 33%;
        display: inline-block;
        margin: 0;
        position: relative;
        text-align: center;
    }

        #we-love-dogs-three-image {
        width: 100%;
        height: auto;
        display: block;
        float: left;
    }

     #we-love-dogs-three-text {
        left: 0;
        position: absolute;
        width: 100%;
        color: white;
        top: calc(50% - 17px);
        font-size: 1.5em;
        display: inline-block;
        font-family: "Montserrat";
    }

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： html css google-chrome sticky-footer

【解决方案1】：

cliffgallagher@ ，尝试使用 div 自动调整大小，而不是几乎不设置每张图像的宽度或高度，这是一个示例帖子：How do I auto-resize an image to fit a div container。

   img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}





  Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
感谢亚历克西，我编辑了答案以反映您提到的更改。亚当