html 如何强制一个块取剩余屏幕的所有高度

wpx232ag 于 2023-04-18 发布在其他

关注(0)|答案(2)|浏览(136)

看，我的HTML中有一个这样的结构：

<body>
    <div class="wrapper">
        <header class="header">
            <div class="container">
                ХЕДЕР
            </div>
        </header>
        <div class="content">
            <div class="container">
                <section class="первая секция контента">
                    ПЕРВАЯ СЕКЦИЯ КОНТЕНТА
                </section>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                ФУТЕР
            </div>
        </footer>   
    </div>
</body>

我让我的内容部分采取所有剩余的屏幕之间的页眉和页脚像这样：

.container{
    max-width: 1170px;
    padding: 0px 15px;
    margin: 0px auto;
    min-height: 100%;
}

.wrapper{
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.content{
    flex: 1 1 auto;
}

正如你所看到的，container在我的内容块中，但是当我设置min-height时：'100%'，它不需要100%的内容部分，为什么会发生这种情况，以及如何使它使用min-height，而不是使用flex？

我的意思是，我希望我的容器在屏幕的末尾占据所有的空间，向下推页脚。

Html

来源：https://stackoverflow.com/questions/76004858/how-to-force-a-block-to-take-all-height-of-remaining-screen

2条答案

按热度按时间

hivapdat1#

1-min-height: 100vh;不工作（至少在我的经验中它不工作）所以使用height: 100vh;然而，由于可能的“内容”溢出，它不是最佳方法。或者也使用（如我在本例中使用的）height: 100%;和margin: 0;。
2-但我建议使用flex。你会更多地使用它，更好地学习它。我建议阅读这篇文章，它解释了使用flex的确切问题的解决方案：文章
以下是我如何使用Flex解决您的问题：

<!DOCTYPE html>
<html>
  <head>
    <style>
        html, body{
            height: 100%;
            margin: 0;
        }
        .wrapper{
            display: flex;
            flex-flow: column;
            height: 100%;
        }
        .wrapper .header{
            flex: 0 1 auto;
            background: #7e8aa0;
        }
        .wrapper .content{
            flex: 1 1 auto;
            background: #dbdfe7;
        }
        .wrapper .footer {
            flex: 0 1 100px;
            background: #7e8aa0;
        }
    </style>
  </head>
  <body>
      <div class="wrapper">
          <header class="header">
              <div class="container">
                  ХЕДЕР
              </div>
          </header>
          <div class="content">
              <div class="container">
                  <section class="первая секция контента">
                      ПЕРВАЯ СЕКЦИЯ КОНТЕНТА
                  </section>
              </div>
          </div>
          <footer class="footer">
              <div class="container">
                  ФУТЕР
              </div>
          </footer>   
      </div>
  </body>
</html>

赞(0）回复(0）举报 2023-04-18

5gfr0r5j2#

我发现问题是你使用了“min-height：100 vh”，这给了它一个未定义的高度，因为它可以无限地高于这个高度。
尝试使用“height：100 vh“相反，这对我来说很有用。
但我不推荐这种方法，因为它溢出 Package 器之外，因为“内容”将与 Package 器本身具有相同的高度，而不考虑也在 Package 器中的页眉和页脚，这将导致页眉和页脚溢出，因为没有为它们留下空间。
所以我认为你最好的选择是坚持使用flex box，因为它是为这种东西而设计的。

赞(0）回复(0）举报 2023-04-18

我来回答

html 如何强制一个块取剩余屏幕的所有高度

2条答案

相关问题

热门标签

最新问答