时间戳

首页 > 解决方案 > 如何让 div 占据屏幕的其余部分而不滚动？

html - 如何让 div 占据屏幕的其余部分而不滚动？

问题描述

在此处输入图像描述 我希望横幅占据屏幕的所有其余部分，在设备上做出响应。从那里开始，滚动以其他信息开始。
我试过使用 100% 高度和自动高度，但我们仍然没有解决。解决此问题的最佳方法是什么？

HTML

  <body>

    <div class="top-bar">
      <div class="logo">Logo</div>
      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">Services</a></li>
        </ul>
      </div>
    </div>

    <div class="banner">
      <div class="banner-text">
        <div class="banner-text-items">
          <h2>Banner Text Heading</h2>
          <p>Exercitation commodo elit magna aute ad magna laboris esse in voluptate voluptate ullamco nulla deserunt.
            Esse adipisicing amet commodo ad laborum sit commodo sit sint et occaecat cillum ex occaecat. Ullamco est
            labore est sit velit nulla deserunt est labore.</p>
        </div>
      </div>
    </div>

  </body>

CSS

  *{margin: 0; padding: 0;}

  .banner{
    background-image: url('./fox.jpg');
    width: 100%;
    background-size: cover;
  }

  .top-bar{
    background-color: #000;
    display: flex;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
  }

  .logo{
    color: #fff;
    flex: 1;
    font-size: 48px;
    padding: 18px;
    text-transform: uppercase;
  }
  .menu{
    flex: 3;
  }

标签： htmlcss

解决方案

添加height: 100vh到您的.bannerCSS 块。这应该使设备屏幕的高度为 100%。

在此处阅读有关此内容的更多信息：https ://css-tricks.com/fun-viewport-units/

推荐阅读