height of a div to match the height of the viewport

2023-04-07 18:40 问答作者：

I have a div like this.

<div> ... </div>

I开发者_C百科 want its height to be the height of the view port (not of the page)

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

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>

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

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

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

html, body {
  height: 100%;
}

div {
  min-height: 100%;
}

if your have set your viewPort to a certain height, you can just give your div height:100%;..

If the div is anywhere in the document, you would need to use javascript. With jQuery is quite simple:

$("#my-div").height($(window).height());

继续阅读：css javascript

精彩评论