Question

我试图让它成为我的页面的第一部分适合整个浏览器，但我也希望它能够响应。我现在面临的问题是，当我调整浏览器大小时，文本或某些内容可能会被切断。

在照片中，您可以看到部分文字被截断，但我不希望它被切断。

基本上，我尝试做的是使顶部适合任何尺寸的整个浏览器，但内部的内容也必须具有响应性。

Click here to see what I mean.

＆＃13;

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

＆＃13;

    <!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>

＆＃13;

Answer 1

被截断的文本是由于给予标题类的两个css属性

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

100vh表示div将是视图（通常是浏览器）高度的100％。由于线条越来越细，文本越来越多，文本将开始溢出。由于div的溢出设置为隐藏，文本将被截断。

这可以被认为是一个固定的高度，建议不要给内容提供固定的高度。

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

min-height:100vh;

Answer 2

＆＃13;

@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;
      top: 0;
    
    }
    .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;
    }
    
    section h1
    {
      padding: 75px 0 0 20px;
    }
    section 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;
      }
    }

＆＃13;

<!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>

＆＃13;

如何让内容适合整个屏幕的浏览器大小？

2 个答案: