Question

我正在构建横向滚动照片组合。它被设置为3层内容：固定位置水平顶部菜单，固定位置水平版权/联系人底栏，以及它们之间的内容。认为：
MENU （已修复）
内容滚动内容内容内容
BOTTOM （已修复）

应该有一个水平滚动条，但我试图让没有垂直滚动。中间内容的最大高度应为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>

CSS：

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 110px;
    width: 100%;
    background-color: #fff;
    z-index:9;
}
.photocontainer{
    position: relative;
    display:inline;
    float:left;
    top:110px;
    margin:0px;
    padding:0px;
    left:0px;
    bottom:45px;
    white-space:nowrap;
}
.photocontainer1 {
    position:inherit;
    max-height:100%;
    max-width:100%;
}
ul.photolistul {
    display:inline-block;
    list-style:none;
    overflow:scroll;
    overflow-style:auto;
    overflow-x:show;
    overflow-y:hidden;
    white-space: nowrap;
}
li.photolistli { display:inline-block; margin:0px;}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    max-height:100%;
    margin-left:110px;
}
.bottommenu{
    position:fixed;
    bottom:0px;
    left:0px;
    height:45px;
    width:100%;
    background-color:#FFFFFF;
}

更新

所以，我回到我的代码中，弄清楚如何使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;

HTML

<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>

Answer 1

您可以使用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

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

1 个答案: