css - 使用 CSS "max-height:100%"调整动态图像大小在具有固定页眉/页脚的 Firefox 和 IE 中不起作用

Question

我在 Firefox 或 IE 中根本无法调整图像大小时遇到​​了很多麻烦。我已经建立了一个带有固定页眉和页脚的横向滚动照片组合，并试图让图像占据两者之间的其余内容空间。我将它们排列在一个内联列表中，使照片横向滚动，所有这些在 Chrome 中都能完美运行，但图像在 Firefox 或 IE 中根本不会调整大小。我尝试了很多不同的东西，但都没有用。我试过设置最大高度、height:calc() 等等。

这是一个live version .

我正在使用以下代码:

CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 110px;
    width: 100%;
    background-color: #fff;
    z-index:9;
}
.photocontainer{
    position: relative;
    display:inline-block;
    float:left;
    top:110px;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    height:auto;
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
}
ul.photolistul {
    display:inline-block;
    height:auto;
    max-height:calc(100% - 155px);
    list-style:none;
    /*overflow:scroll;
    overflow-x:hidden;
    overflow-y:hidden;*/
    white-space: nowrap;
    padding:0px;
    margin:0px;
}
li.photolistli { display:inline-block; margin:0px;}
img.photo {
    margin-top:0px;
    display:inline-block;
    height:auto;
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    width:auto;
    max-width:100%;
    margin-left:110px;

}
.photocount {
    position:fixed;
    bottom:0px;
    left:0px;
    height:35px;
    width:100%;
    background-color:#FFFFFF;
}

HTML

<div style="max-height:100%">
<div class="header">
    <div class="header-navbar">
        TEXT GOES HERE
    </div>
</div>
<div class="photocontainer">
<ul class="photolistul">
    <li class="photolistli"><img class="photo" src="photo1.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo2.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo3.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo4.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo5.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo6.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo7.jpg" alt="" /></li>    
</ul>
</div>
<div class="photocount">
<p class="smalltype" style="margin-left:25px;">:: TEXT GOES HERE ::</p>
</div>

我的目标是在缩小浏览器窗口时缩小图像以适应。同样，该代码在 Chrome 中运行良好，但在 IE 和 Firefox 中突然停止运行。当然，最简单的解决方案是将所有照片设置为相同高度(一个小笔记本电脑屏幕，大约 500 像素高？)但我希望它能够响应并以尽可能大的格式显示照片，而不会垂直破坏屏幕。

Answer 1

只需在

中添加overflow-x:auto

.photocontainer{
    position: relative;
    display:inline-block;
    float:left;
    top:110px;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    height:auto;
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
    overflow-x:auto;
}

我在 inspect element 中检查了你的 live version 并且它运行良好