CSS - vh does work while percentage doesn't

Question

For a project I started making a template containing a banner (80% of the page).

Yesterday I had a problem with using %. % wasn't working for me while vh did. The problem, someone said, was that the div where I had put the background was also in a div but without a height. So I defined that to 100%. But still it doesn't work. The background-image is just as big as the content of the div itself.

My codes:

@charset "utf-8";
/* CSS Document */
/*MAIN*/
body{
 width: 100%;
 height: 100%;
}
/*BANNER*/
#banner{
 width: 100%;
 height: 100%;
 background-color: black;
}
#bannerimg{
 background-image: url("https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 height: 80%;
}

<!DOCTYPE html>
<html>
 <head>
  <!--ALGEMEEN-->
  <meta charset="utf-8">
  <title>Homepagina - RC paneel</title>
  <!--FONT-->
  <!--INCLUDE-->
  <link href="//cdn.muicss.com/mui-0.9.41/css/mui.min.css" rel="stylesheet" type="text/css" />
  <script src="//cdn.muicss.com/mui-0.9.41/js/mui.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <!--STYLE-->
  <link rel="stylesheet" href="css/index.css">
  <!--SCRIPT-->
 </head>
 <body>
  <!--BANNER-->
  <section id="banner">
   <!--NAVBAR-->
   <!--BANNER-->
   <div id="bannerimg">
    Test
   </div>
  </section>
  <!--OVER ONS-->
  <!--VEELGESTELDE VRAGEN-->
  <!--CONTACT-->
 </body>
</html>

as you are using percentage heights, you need to add `html { height:100%; }` too — Pete, Oct 30 '18 at 17:17

score 1 · Accepted Answer · answered Oct 30 '18 at 17:17

Add html to the body selector you have to have a height reference for body

@charset "utf-8";
/* CSS Document */
/*MAIN*/
html, body{
 width: 100%;
 height: 100%;
}
/*BANNER*/
#banner{
 width: 100%;
 height: 100%;
 background-color: black;
}
#bannerimg{
 background-image: url("https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 height: 80%;
}

<!DOCTYPE html>
<html>
 <head>
  <!--ALGEMEEN-->
  <meta charset="utf-8">
  <title>Homepagina - RC paneel</title>
  <!--FONT-->
  <!--INCLUDE-->
  <link href="//cdn.muicss.com/mui-0.9.41/css/mui.min.css" rel="stylesheet" type="text/css" />
  <script src="//cdn.muicss.com/mui-0.9.41/js/mui.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <!--STYLE-->
  <link rel="stylesheet" href="css/index.css">
  <!--SCRIPT-->
 </head>
 <body>
  <!--BANNER-->
  <section id="banner">
   <!--NAVBAR-->
   <!--BANNER-->
   <div id="bannerimg">
    Test
   </div>
  </section>
  <!--OVER ONS-->
  <!--VEELGESTELDE VRAGEN-->
  <!--CONTACT-->
 </body>
</html>

score 0 · Answer 2 · answered Oct 30 '18 at 17:16

0

You have to add html as well, this way your min height of the page will be 100% vh. then you can use #banner with %

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

answered Oct 30 '18 at 17:16

Mike Trinh

1,271
2
9
19

CSS - vh does work while percentage doesn't

2 Answers2