CSSのパーセントを使用してページの特定の部分を指定することは可能ですか？

Question

私は自分のウェブサイトに水平スクロールページを作成しようとしています。 4つのページがあるので、スクロール部分全体を400％に設定しました。しかし、最初のページに0〜100％、2番目のページに100〜200％などを使用できるように、400％をカットすることがCSS、jQueryなどを使用して可能ですか？または、これを回避する別の方法があります（ブラウザ間/画面サイズの互換性のためにこれを達成しようとしています）。私はハードピクセルを使用してこれまでこれを行ってきましたが、それをパーセンテージに変更する方法はありますか？

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

ウェブサイト：andrewgu12.kodingen.com

Answer 1

に100%幅を与えることができます。

demo

とあなたの＃は、HTMLで内側容器のでしょうか？

Answer 2

translitionスライドは、400％の幅と各スライドの100％を持っている必要があります。コンテナは幅100％、オーバーフロー：javascript/anchorsまたはoverflow-x：scrollでこれを行う場合は非表示にします。

Answer 3

あなたは100%にご​​幅を設定し、あなたの体にbackground-color: #bee1ff;を与えることができ、あなたの​​クラス

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