用固定的身体垂直滚动

-2

这是交易。我需要一行很多照片。整个网站的宽度太多了。所以我需要应用水平滚动。问题是页眉和页脚。我需要它被修复。用固定的身体垂直滚动

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

感谢，

来源

2015-11-01 Filip Kartousek

多点具体和每个职位只问一个问题。 – somesoaccount

你还可以使用搜索，https://www.google.com/search?q=image+full+width+css也更具体http://stackoverflow.com/questions/12082913/with-css-how-do- i-make-an-image-span-the-full-width-of-page-as-a-background –

我假设你想要做的是有粘性/固定的页眉和页脚，与图像之间出现垂直100％。

除非每个以前的元素（每个连续的父元素）从html标签伸展100％的高度，否则不缩放100％的高度。或者你可以使用测量vh。我下面的示例不使用vh度量。

这里有以下的的jsfiddle：http://jsfiddle.net/fxxgb85f/6/

对于结构如下：

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

您将有以下CSS：

html, body { width: 100%; height: 100%; } 
body { 
    margin: 0; 
    padding: 50px 0; 
    overflow: hidden; 
} 

*, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing:   border-box; 
} 

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 5; 
    width: 100%; 
    height: 50px; 
    background-color: #f00; 
} 
.footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    z-index: 5; 
    width: 100%; 
    height: 50px; 
    background-color: #f00 
} 

.content { 
    position: relative; 
    margin: 0; 
    display: block; 
    width: 100%; 
    height: 100%; 
    max-height: 100%; 
    overflow-x: auto; 
} 

ul.imglist { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    list-style-type: none; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 
ul.imglist li { 
    margin: 0 5px 0 0; 
    padding: 0; 
    display: block; 
    float: left; 
    width: 100%; 
    height: 100%; 
} 
ul.imglist li img { 
    display: block; 
    width: auto; 
    height: 100%; 
}

的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 }); 
}

来源

2015-11-01 17:50:18 Pegues

谢谢，但我需要在那里有更多的图像垂直对齐比屏幕宽度更宽，所以我也需要垂直滚动那些图像 –

我的解决方案仍然是可行的Filip Kartousek。你所做的是用div替换我的解决方案中的图像。该div将具有100％的高度。然后，您将添加所有图像，并添加overflow-y：scroll。 – Pegues

根据您写回的内容更新了解决方案。查看新的JSFiddle，并调整垂直滚动条的大小以查看基于视口宽度的图像宽度更改。 – Pegues

用固定的身体垂直滚动

回答

相关问题