个人中心
gpt4 book ai didi

javascript - 如何根据浏览器大小让内容适合整个屏幕？

转载 作者：太空宇宙 更新时间：2023-11-03 22:32:02 24 4
gpt4 key购买 nike

我正在努力使我页面的第一部分适合整个浏览器，但我也希望它能够响应。我现在遇到的问题是，当我调整浏览器大小时，文本或某些内容可能会被 chop 。

在照片中，您可以看到一些文字被 chop 了，但我不希望它被 chop 。

基本上，我想做的是让顶部适合任何尺寸的整个浏览器，但里面的内容也必须是响应式的。

这是一个JSFiddle

Click here to see what I mean. 

@import url('https://fonts.googleapis.com/css?family=Asap');
    
    body, html
    {
      background-color: #598392;
      margin: 0;
      padding: 0;
      font-family: 'Asap', sans-serif;
      height:100%;
    }
    
    .menuIcon
    {
      padding:20px;
      display:none;
      cursor:pointer;
    }
    
    .navigationBar
    {
      background-color: #124559;
      width:100%;
      overflow:hidden;
      position:fixed;
    
    }
    .title
    {
      overflow:hidden;
      height:100vh;
      
    }
    .navigationBar li
    {
      padding:20px;
      display: inline;
      list-style-type:none;
    
    }
    
    a
    {
      color: #EFF6E0;
      text-decoration: none;
    }
    a:hover
    {
      color: #AEC3B0;
    }
    nav ul
    {
      padding: 20px;
      margin: 0;
      transition: max-height 1s;
    }
    
    .title h1
    {
      padding: 75px 0 0 20px;
    }
    .title article
    {
      padding: 20px;
    }
    
    
    .show
    {
        display:block;
    }
    
    @media only screen and (max-width: 768px)
    {
      .menuIcon
      {
        display:block;
      }
    
      .navigationBar
      {opacity: 0.9;}
      .navigationBar li
      {
        display:block;
        padding: 10px;
        text-align: center;
    
      }
      nav ul
      {
        max-height: 0;
        padding: 0px;
    
      }
    
      .show
      {
        max-height: 200px;
    
      }
      .title article
      {
        padding: 20px;
      }
    
    }
    /*
    @media only screen and (min-width: 768px)
    {
      nav ul
      {
        display: block !important;
      }
    }
    <!DOCTYPE html>
    <html>
    <head>
      <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
      <link rel = "stylesheet" type ="text/css" href = "nav.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
      <nav class = "navigationBar">
        <img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon">
        <ul class = "linkBar">
    
          <li><a href = "#">Home</a></li>
          <li><a href = "#">Contact</a></li>
          <li><a href = "#about" class = "aboutLink">About</a></li>
          <li><a href = "#">Media</a></li>
          <li><a href = "#">Miscellaneous</a></li>
    
        </ul>
      </nav>
    
      <section class = "title">
        <h1>Welcome</h1>
        <article>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis vitae magna quis lacinia. Donec felis velit, consequat at nisi quis, sollicitudin scelerisque quam. Proin metus sapien, lobortis ac lacus a, maximus porttitor magna. Praesent pellentesque felis a consequat semper. Sed commodo gravida elit sit amet interdum. Suspendisse felis tellus, consequat vel varius eu, tincidunt eu elit. Quisque porttitor ultricies risus, at accumsan diam vehicula in. Aliquam sit amet arcu nec dui pretium viverra et eget ipsum. Mauris id diam sem. Etiam pellentesque eleifend odio non sagittis. Phasellus eleifend felis et convallis mollis. Donec eget diam nisl. Nam non molestie mi. Suspendisse vitae efficitur nisl. In ac urna at mi ultrices commodo.
        </article>
        <article>
        Vestibulum quis porttitor nisl, eget tincidunt ante. Ut ac fringilla nulla. Donec cursus est semper sodales mollis. In pellentesque   elementum porttitor. Curabitur aliquet velit risus, sed blandit nisl luctus cursus. Vivamus sem massa, cursus vitae ipsum fringilla, feugiat porta tellus. Fusce ac ornare nisi. Maecenas metus nibh, tincidunt vel sem vel, iaculis pharetra sem. Aenean dolor nisl, porta sit amet rutrum et, posuere nec nibh. Pellentesque ante nisi, molestie dignissim porttitor sit amet, dignissim ut magna.
        </article>
        <article>
        Vestibulum congue finibus felis suscipit pellentesque. Nunc pulvinar neque a ipsum molestie, condimentum congue urna hendrerit. Morbi egestas ac velit quis tincidunt. Donec consectetur finibus dui a consequat. Sed varius diam ut dui viverra, a pellentesque nunc molestie. Nullam tristique iaculis nibh, non posuere nunc scelerisque eu. Suspendisse dictum velit et felis lacinia ullamcorper.
      </article>
        <article>
        Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
      </article>
      <article>
        Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
        </article>
      </section>
    
      <section class = "about" id = "about">
        <h1>About</h1>
        <article>
        Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
      </article>
      <article>
        Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
        </article>
      </section>
    
      <script>
    
        $('.menuIcon').on('click', function() {
          $('nav ul').toggleClass('show');
        });
    
        $('.aboutLink').on('click', function() {
          $('html, body').animate({scrollTop: $('#about').offset().top}, 2000);
        });
    
      </script>
    </body>
    </html>

最佳答案

文本被 chop 是由于给title类的两个css属性

.title
{
    overflow:hidden;
    height:100vh;
}

100vh 表示 div 将是 View (通常是浏览器)高度的 100%。由于行变细，文本跨越更多行，文本将开始溢出。由于 div 的溢出设置为隐藏，文本将被 chop 。

这可以被认为是固定高度，建议不要为带有内容的 div 提供固定高度。

如果删除这两行代码，文本将不会被 chop 。如果你想在更大的屏幕上保持高度，你可以使用以下代码来确保高度不会低于 100vh

min-height:100vh;

关于javascript - 如何根据浏览器大小让内容适合整个屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48102628/

24 4 0
文章推荐： node.js - 使用 Mongoose Promise 对 MongoDB 查询进行单元测试
文章推荐： node.js - 如何从类(函数)创建 Mongoose 模式
文章推荐： node.js - 升级npm和nodejs后如何修复npm包
文章推荐： c++ - OpenCV VideoWriter 打不开
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com