Html 固定体垂直滚动_Html_Css

Html 固定体垂直滚动

html css

Html 固定体垂直滚动,html,css,Html,Css,事情是这样的。我需要一行中有很多图片。太多了，不能放在整个场地上。所以我需要应用水平滚动。问题是页眉和页脚。我需要把它修好 <div style="background-color: green; height: 80%"> <div style="background-color: purple; height: 100%; width: 1000px; white-space: nowrap"> <img style="max-height: 100%"

事情是这样的。我需要一行中有很多图片。太多了，不能放在整个场地上。所以我需要应用水平滚动。问题是页眉和页脚。我需要把它修好

<div style="background-color: green; height: 80%">

<div style="background-color: purple; height: 100%; width: 1000px; white-space: nowrap">

<img style="max-height:  100%" src="Barum/01.jpg">  
<img style="max-height:  100%" src="Barum/02.jpg">
<img style="max-height:  100%" src="Barum/03.jpg">
<img style="max-height:  100%" src="Barum/04.jpg">
<img style="max-height:  100%" src="Barum/05.jpg">
<img style="max-height:  100%" src="Barum/06.jpg">
<img style="max-height:  100%" src="Barum/07.jpg">

</div>  

</div>  
<div style="background-color: red; height: 10%"></div>

谢谢，

我假设您想要做的是有一个粘性/固定的页眉和页脚，图像在这两者之间100%垂直显示

除非之前的每个元素（每个连续的父元素）都从html标记拉伸100%的高度，否则没有任何内容可以缩放100%的高度。或者您可以使用测量

vh

。我下面的例子没有使用

vh

测量

下面是以下内容的一部分：

对于以下结构：

<body>
    <div class="header"></div>
    <div class="content">
        <ul class="imglist">
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
        </ul>
    </div>
    <div class="footer"></div>
</body>

jQuery：

$(document).ready(function(){

    horScoll();

    // On Load and On Resize
    $(window).on('load resize', function(){
        horScoll();
    });
});

function horScoll(){
    var parentSel = $('ul.imglist');
    var listSel = $('ul.imglist li');

    var liCount = $('ul.imglist li').length;
    var imgWidth = $('ul.imglist li img').width();

    parentSel.css({ width: liCount * imgWidth });
    listSel.css({ maxWidth: imgWidth });
}

更具体一点，每篇文章只问一个问题。你可以使用搜索，也可以更具体一点，谢谢，但我需要有更多的图像垂直对齐比屏幕宽度更宽，所以我还需要垂直滚动这些图像。我的解决方案仍然可行Filip Kartousek。您要做的是将我的解决方案中的图像替换为div。该div将具有100%的高度。然后，您将在其中添加所有图像，并添加overflow-y:scroll。解决方案将根据您写回的内容进行更新。查看新的JSFIDLE，调整垂直滚动条的大小，以查看基于视口宽度的图像宽度的变化。很抱歉，我指的是在content DIV中使用img 100%高度的水平滚动。我现在将尝试更新该解决方案，以包括水平滚动。这需要使用jQuery。我添加的jQuery可以做得更好。但我只是想帮你，让你继续工作。

$(document).ready(function(){

    horScoll();

    // On Load and On Resize
    $(window).on('load resize', function(){
        horScoll();
    });
});

function horScoll(){
    var parentSel = $('ul.imglist');
    var listSel = $('ul.imglist li');

    var liCount = $('ul.imglist li').length;
    var imgWidth = $('ul.imglist li img').width();

    parentSel.css({ width: liCount * imgWidth });
    listSel.css({ maxWidth: imgWidth });
}