javascript - 如何使用CSS显示适应屏幕大小的div内容(单页网站)

Question

我正在尝试制作一个菜单会自动滚动到目标 div 的单页网站，现在我的问题是当我从笔记本电脑切换到具有不同分辨率的台式机时，div 彼此重叠，有时内容会从显示中剪切，我的目标是让它尽可能适应任何屏幕尺寸，body overflow 被隐藏，navigation 被固定看我的实际代码。

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

研究使用 flexbox:https://css-tricks.com/snippets/css/a-guide-to-flexbox .这将允许您的页面动态调整以适应窗口或容器的大小。为您完成所有繁重的工作。