div的高度以匹配视口的高度 [英] height of a div to match the height of the viewport

查看：58 发布时间：2021/4/26 19:51:32 javascript css

本文介绍了div的高度以匹配视口的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

我有这样的div.

<div> ... </div>

我希望它的高度是视口的高度(而不是页面的高度)

I want its height to be the height of the view port (not of the page)

是否可以通过CSS来执行此操作，或者我必须编写一些javascript吗?

is it possible to do this via CSS or do I have to write some javascript ?

是的，有可能.只要父元素定义了高度，CSS百分比高度将起作用.假设这是您的标记:

Yes, it's possible. CSS percentage height will work as long as the parent element has a height defined. Assuming this is your markup:

<html>
  <body>
    <div></div>
  </body>
</html>

此CSS将导致< div> 具有视口的完整高度:

This CSS will cause the <div> to have the full height of the viewport:

html, body, div {
  height: 100%;
}

如果您希望< div> 扩展其内容，则CSS会更改如下:

If you wanted the <div> to expand with its content, the CSS would change as follows:

html, body {
  height: 100%;
}

div {
  min-height: 100%;
}

这篇关于div的高度以匹配视口的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文