Có thể chỉ định các phần nhất định của trang bằng cách sử dụng tỷ lệ phần trăm trong CSS?

Question

Vì vậy, tôi đã cố gắng tạo trang cuộn ngang trên trang web của mình. Tôi đặt toàn bộ phần cuộn xuống 400%, vì tôi có bốn trang. Tuy nhiên, tôi đã tự hỏi là nó có thể (bằng cách sử dụng CSS, jQuery, vv) để cắt lên rằng 400% để tôi có thể sử dụng 0-100% cho trang đầu tiên, 100% -200% cho trang thứ hai, vv? Hoặc là có một cách khác xung quanh này (Tôi đã cố gắng để thực hiện điều này cho cross-trình duyệt/kích thước màn hình tương thích). Tôi đã chỉ quản lý để làm điều này cho đến nay bằng cách sử dụng điểm ảnh cứng, nhưng có cách nào để thay đổi đó thành tỷ lệ phần trăm?

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

Website: andrewgu12.kodingen.com

Answer 1

bạn có thể thiết lập chiều rộng .slide của bạn để 100% và cung cấp cho background-color: #bee1ff; để cơ thể của bạn.

demo

và # container bên trong của bạn ở đâu?

Answer 2

translition trượt nên có chiều rộng là 400% và mỗi slide 100%. Vùng chứa sẽ có chiều rộng 100%, tràn: ẩn nếu bạn muốn làm điều này với javascript/neo hoặc tràn-x: cuộn;

Answer 3

bạn có thể cung cấp cho 100% chiều rộng để .slide lớp học của bạn

.slide { 
    display: inline-block; 
    width: 100%; 
    margin: 0 auto; 
}