Set dynamic height for div with javascript

Asked

Viewed 214 times

2

I’d like a script that takes my div with the class master and define height: 100% according to screen size.

html: 

   <!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>*</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="master">
        <header>
        </header>
        <footer>        
        </footer>
        </div>
    </body>
    </html>

css:

*{}
html {

}

body {
  margin: 0;
}
.container{
    float: left;
    width: 100%;
    margin: 0 auto;
    padding:0 15px;
}
javascript html jquery css

2 answers

2

The child element, in this case . master, has its width related to the parent element, in this case the body. We can therefore set the body width attribute to 100vw (Full screen width) to make it fill in the entire horizontal spacing. Then we should make div.master fill this space, in which case we can use the same attribute as 100% in the child element so that it follows the parent element across its width.

    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw; 
    }

    .master {
        width: 100%;
    }

0

Look, I don’t think you need to use js for that. I’ve had problems with this before... The case is that the 100% height refers to the parent element, which in this case, has no height defined and 100% of nothing is nothing!

Do this in css:

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.master{height:100%;}

See if it works...

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.