因此,我一直在尝试在我的网站上创建一个水平滚动页面。我将整个滚动部分设置为 400%,因为我有四页。但是,我想知道是否有可能(使用 CSS、jQuery 等)削减 400%,以便第一页使用 0-100%,第二页使用 100%-200%,等等?还是有另一种解决方法(我一直在尝试实现跨浏览器/屏幕尺寸兼容性)。到目前为止,我只能使用硬像素做到这一点,但有没有办法将其更改为百分比?
HTML:
<div id="transition-slide-container">
<div id="transition-slide">
<div id="inner-container>
<div class="slide" id="home">
<h1>home</h1>
</div>
</div>
<div class="slide" id="portfolio">
<div id="inner-container">
<h1>portfolio</h1>
</div>
</div>
<div class="slide" id="about">
<div id="inner-container">
<p>about</p>
</div>
</div>
<div class="slide" id="contact">
<div id="inner-container">
<p>contact<p>
</div>
</div>
</div>
</div>
CSS:
div#transition-slide-container {
background: #bee1ff;
padding-top: 128px;
padding-bottom: 50px;
height: 900px;
min-width: 400%;
z-index: -1;
float: left;
position: relative;
}
div#transition-slide {
white-space: nowrap;
}
.slide {
display: inline-block;
width: 1620px;
margin: 0 auto;
}
div#inner-container {
width: 1024px;
margin: 0 auto;
padding: 0;
}
最佳答案
关于html - 可以在 CSS 中使用百分比指定页面的某些部分吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17564604/