Html 创建适合div图像高度的水平图像组合？

我正在建立一个水平滚动照片组合。它被设置为3层内容：一个固定位置的水平顶部菜单，一个固定位置的水平版权/联系人底部栏，内容放在它们之间。思考：
菜单（固定）
内容的水平滚动
底部（固定）

应该有一个水平滚动条，但我试图使没有垂直滚动。中间内容的最大高度应该是100%，减去顶部div和底部div。通常，这不是一个问题，但是当中间内容是一堆图像时，我开始有问题。我似乎无法使图像调整大小以适应顶部+底部框绑定的中间div。所以：如果屏幕大小高度=100%，那么中间的div应该是（（100%-（顶部div+底部div））。
就水平滚动而言，我使用了两种方法：一种是将中间的div设置为非常大的宽度（这通常意味着如果我调整窗口的大小，会留下很多额外的空白）；第二种方法是将图像放入一个列表中，使列表溢出并将div拉伸到所需的程度。不过，这两种方法对我都不适用

那么：我如何创建中心div并使我的图像调整大小，而不是垂直溢出窗口，而是水平溢出和拉伸窗口

HTML:

<!-- TOP HEADER -->
<div class="header">
        <div id="button">
            <img src="../../images/headers/rk-button.png" alt="" />
        </div> 
        <div class="header-navbar">
            <span class="smalltype">Photos // stuff stuff stuff menu menu menu</span>
        </div>
    </div>

<!-- PHOTOS CONTAINER -->
    <div class="photocontainer">
    <ul class="photolistul">
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk1.jpg" alt="" /></div></li>
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk4.jpg" alt="" /></div></li>
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk2.png" alt="" /></div></li>
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk5.png" alt="" /></div></li>
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk6.png" alt="" /></div></li>
    </ul>
    </div>

<!-- BOTTOM MENU -->
<div class="bottommenu">
    <p class="smalltype" style="margin-left:25px;">All photos & work  = blah blah blah text text</p>
</div>

---

更新

.photocontainer{
    position: relative;
    display:inline;
    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);
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
}
.photocontainer1 {
    position:inherit;
    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);
    max-width:100%;
    padding:0px;
    margin:0px;
}
ul.photolistul {
    display:inline-block;
    max-height:calc(100% - 155px);
    list-style:none;
    overflow:scroll;
    overflow-style:auto;
    overflow-x:hidden;
    overflow-y:hidden;
    white-space: nowrap;
    padding:0px;
    margin:0px;
}
li.photolistli { display:inline-block; margin:0px;}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    height:100%;
    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);
    margin-left:110px;

}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    height:100%;
    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);
    margin-left:110px;

<div style="max-height=100%">
<div class="header">
<div class="header-navbar">
        NAVBAR TEXT GOES HERE
    </div>
</div>
<div class="photocontainer">
<ul class="photolistul">
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw000.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw007.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw008.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw009.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw005.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw006.jpg" alt="" /></div></li>
</ul>
</div>

<div class="photocount">
<p class="smalltype" style="margin-left:25px;">LOTSA FOOTER TEXT</p>
</div>
</div>

因此，我回到我的代码中，找到了如何使photocontainer div横向拉伸到宽度，以及如何使图像正确调整到容器div的大小。然而，

max height:calc（100%-145px）

（以及必要的供应商前缀）在Firefox或IE上似乎对我不起作用（但在Chrome中工作得非常好）

有人能看看新代码，看看我做错了什么吗？
（哦，我通过一个验证器（css3，不少于！）运行了它，该验证器返回了“Value Error:max height Parse Error-155px”，关于我对calc（）函数的使用。我还尝试在常规

height:

css上使用calc（），但没有成功地将其用于IE或Firefox。总之，代码是：

CSS

.photocontainer{
    position: relative;
    display:inline;
    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);
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
}
.photocontainer1 {
    position:inherit;
    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);
    max-width:100%;
    padding:0px;
    margin:0px;
}
ul.photolistul {
    display:inline-block;
    max-height:calc(100% - 155px);
    list-style:none;
    overflow:scroll;
    overflow-style:auto;
    overflow-x:hidden;
    overflow-y:hidden;
    white-space: nowrap;
    padding:0px;
    margin:0px;
}
li.photolistli { display:inline-block; margin:0px;}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    height:100%;
    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);
    margin-left:110px;

}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    height:100%;
    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);
    margin-left:110px;

<div style="max-height=100%">
<div class="header">
<div class="header-navbar">
        NAVBAR TEXT GOES HERE
    </div>
</div>
<div class="photocontainer">
<ul class="photolistul">
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw000.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw007.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw008.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw009.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw005.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw006.jpg" alt="" /></div></li>
</ul>
</div>

<div class="photocount">
<p class="smalltype" style="margin-left:25px;">LOTSA FOOTER TEXT</p>
</div>
</div>

HTML

.photocontainer{
    position: relative;
    display:inline;
    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);
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
}
.photocontainer1 {
    position:inherit;
    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);
    max-width:100%;
    padding:0px;
    margin:0px;
}
ul.photolistul {
    display:inline-block;
    max-height:calc(100% - 155px);
    list-style:none;
    overflow:scroll;
    overflow-style:auto;
    overflow-x:hidden;
    overflow-y:hidden;
    white-space: nowrap;
    padding:0px;
    margin:0px;
}
li.photolistli { display:inline-block; margin:0px;}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    height:100%;
    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);
    margin-left:110px;

}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    height:100%;
    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);
    margin-left:110px;

<div style="max-height=100%">
<div class="header">
<div class="header-navbar">
        NAVBAR TEXT GOES HERE
    </div>
</div>
<div class="photocontainer">
<ul class="photolistul">
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw000.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw007.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw008.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw009.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw005.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw006.jpg" alt="" /></div></li>
</ul>
</div>

<div class="photocount">
<p class="smalltype" style="margin-left:25px;">LOTSA FOOTER TEXT</p>
</div>
</div>

导航栏文本在此显示








LOTSA页脚文本

您可以使用jQuery获取窗口/屏幕大小，然后设置图像的高度（所有图像的大小/比例是否相同？）。在css上将宽度设置为“自动”

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

---

如果没有jQuery，有可能做到这一点吗？我发现我可以在CSS中使用一个calc（）函数，它似乎可以做我需要它做的事情…你可以，但你需要先设置宽度（例如，宽度：98%；），然后使用calc（）设置宽度函数，以防有人使用不兼容的浏览器。我不确定这是否能满足您的需要，我个人没有广泛使用calc（）函数，我总是使用jQuery。验证程序上显示的错误是W3C在html上的已知错误，您应该更改：感谢您的关注！