CSS（1ページのウェブサイト）を使用して画面サイズにdi​​vコンテンツの追加を表示する方法

Question

ターゲットページに自動的にスクロールする1ページのWebサイトを作成しようとしています。 divのオーバーラップが異なると、コンテンツが表示から切り取られることがあります。私の目標は、できるだけ画面サイズに適応させることです。ボディのオーバーフローが隠され、ナビゲーションが固定されています。

body{ 
 
    
 
    overflow: hidden; 
 
    
 
} 
 

 
.main{ 
 
    background-color: transparent; 
 
    box-shadow: none; 
 
    display:inline; 
 
    width: 100%; 
 
    z-index: 1000; 
 
    
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.panel { 
 
    width: 100%; 
 
    position: relative; 
 
    height: 800px; 
 
    margin-bottom: 100px; 
 
    margin-top: 100px; 
 
    z-index:0; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    -webkit-transition: -webkit-transform 0.6s ease-in-out; 
 
    transition: transform 0.6s ease-in-out; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 

 
}

<nav class="main" style="position:fixed;"> 
 
    <div class="nav-wrapper"> 
 
<ul id="nav-mobile" class="right hide-on-med-and-down"> 
 
     <li><a href="#particles-js">Title 1</a></li> 
 
     <li><a href="#staggered-test">About</a></li> 
 
     <li><a href="#package">Title 3</a></li> 
 
     </ul> 
 
     </div> 
 
</nav>  
 

 

 
     
 
    <div class="panel" id="particles-js"> 
 
     
 
      <h3 class="animated fadeIn slow-poke" style="font-size:92px; position: relative; top:120px; margin-left:50px;">Main Title</h3> 
 
      <p class="animated fadeIn slow-poke2" style="position: relative; top:120px; margin-left:50px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim fringilla scelerisque. Quisque quis arcu eu nunc vehicula consequat. Sed sed dui sit amet orci tincidunt porttitor. Aenean justo libero, accumsan ac purus at, efficitur rhoncus urna. </p> 
 
     </div> 
 
     
 
    
 

 

 
    
 
    <div class="panel" id="staggered-test"> 
 
    
 
     <h1 style="margin-left:50px;">About</h1> 
 

 
      <p class="flow-text" style="margin-left:50px; font-size:19px;" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim fringilla scelerisque. Quisque quis arcu eu nunc vehicula consequat. Sed sed dui sit amet orci tincidunt porttitor. Aenean justo libero, accumsan ac purus at, efficitur rhoncus urna. Vivamus varius sed nisi id placerat. Vestibulum eleifend convallis sem malesuada facilisis. In laoreet lacus eget elit malesuada luctus. Etiam sodales enim orci, eget ullamcorper nisi faucibus sit amet. Duis iaculis hendrerit euismod. Aenean gravida ipsum nec ipsum tincidunt aliquet. Praesent pharetra eget diam eu porta. 
 

 
Proin sit amet consequat erat. Nullam non sollicitudin ipsum. Aenean ultricies tempor lobortis. Aenean in justo sapien. Donec ac massa vel mauris vehicula fringilla. Mauris porta fermentum dui sit amet ornare. Phasellus porttitor fringilla viverra. Praesent scelerisque ultricies sem, in posuere diam lobortis quis. Sed aliquam tellus non leo pulvinar, sit amet facilisis enim porta. Pellentesque malesuada leo tortor, sed commodo odio dapibus vel. Etiam et metus lacinia, tempor velit quis, sodales lacus. Duis tincidunt elit vel purus lobortis scelerisque. 
 

 
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam tempus fermentum hendrerit. Donec dictum leo sit amet vulputate congue. Praesent condimentum aliquam imperdiet. Phasellus ligula urna, lacinia sit amet mollis porttitor, pharetra nec ante. Donec laoreet neque at tempor mattis. Sed et elit in sapien eleifend vehicula. 
 

 
Duis accumsan ullamcorper massa, ut luctus mi egestas id. Nullam sit amet purus a dolor pulvinar fermentum in et felis. Quisque lacinia auctor mauris a blandit. Donec a dictum ligula. Aliquam condimentum euismod tortor at consequat. Morbi eu diam consectetur dolor porta consectetur. Curabitur tortor elit, facilisis non est eu, dignissim mattis nisl. Ut dictum magna eu auctor porttitor. Etiam ullamcorper libero turpis, tempor pretium metus imperdiet eu. Fusce eget massa pretium, pretium dui sed, blandit ipsum. Aenean sollicitudin nisi in mauris mattis, non porta metus eleifend. </p> 
 
    
 
      
 
    
 

 
    
 
    <div class="panel" id="package"> 
 
    
 

 
     
 
     <h1 style="margin-left:50px;">Title3</h1> 
 
      
 
      <p class="flow-text" style="margin-left:50px; font-size:19px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim fringilla scelerisque. Quisque quis arcu eu nunc vehicula consequat. Sed sed dui sit amet orci tincidunt porttitor. Aenean justo libero, accumsan ac purus at, efficitur rhoncus urna. Vivamus varius sed nisi id placerat. Vestibulum eleifend convallis sem malesuada facilisis. In laoreet lacus eget elit malesuada luctus. Etiam sodales enim orci, eget ullamcorper nisi faucibus sit amet. Duis iaculis hendrerit euismod. Aenean gravida ipsum nec ipsum tincidunt aliquet. Praesent pharetra eget diam eu porta. 
 

 
Proin sit amet consequat erat. Nullam non sollicitudin ipsum. Aenean ultricies tempor lobortis. Aenean in justo sapien. Donec ac massa vel mauris vehicula fringilla. Mauris porta fermentum dui sit amet ornare. Phasellus porttitor fringilla viverra. Praesent scelerisque ultricies sem, in posuere diam lobortis quis. Sed aliquam tellus non leo pulvinar, sit amet facilisis enim porta. Pellentesque malesuada leo tortor, sed commodo odio dapibus vel. Etiam et metus lacinia, tempor velit quis, sodales lacus. Duis tincidunt elit vel purus lobortis scelerisque. 
 

 
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam tempus fermentum hendrerit. Donec dictum leo sit amet vulputate congue. Praesent condimentum aliquam imperdiet. Phasellus ligula urna, lacinia sit amet mollis porttitor, pharetra nec ante. Donec laoreet neque at tempor mattis. Sed et elit in sapien eleifend vehicula. 
 

 
Duis accumsan ullamcorper massa, ut luctus mi egestas id. Nullam sit amet purus a dolor pulvinar fermentum in et felis. Quisque lacinia auctor mauris a blandit. Donec a dictum ligula. Aliquam condimentum euismod tortor at consequat. Morbi eu diam consectetur dolor porta consectetur. Curabitur tortor elit, facilisis non est eu, dignissim mattis nisl. Ut dictum magna eu auctor porttitor. Etiam ullamcorper libero turpis, tempor pretium metus imperdiet eu. Fusce eget massa pretium, pretium dui sed, blandit ipsum. Aenean sollicitudin nisi in mauris mattis, non porta metus eleifend. </p> 
 
     
 
     </div> 
 
    </div> 
 
    
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<script> 
 

 
$('a[href*=\\#]').on('click', function(event){  
 
    event.preventDefault(); 
 
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
 
    
 
}); 
 

 
</script>

Answer 1

フレキシボックス使用して調べてください：https://css-tricks.com/snippets/css/a-guide-to-flexboxを。これにより、ウィンドウやコンテナのサイズに合わせてページを動的に調整することができます。あなたのためにすべての重い持ち上げますか？