CODEWITHSUNDEEP
htmlcss
Sameer Moin
Sameer Moin

Reputation: 72

Getting No Output in HTML5

Why this code not giving any output ?
i am not understand what's the problem.

.a {
  background-color: #ff0000;
  height: 30%;
  width: 100%;
}
<div class="a">
</div>

Upvotes: 1

Views: 41

Answers (2)

mohamedaissani
mohamedaissani

Reputation: 9

.a {
  background-color: #ff0000;
  height: 30%;
  width: 100%;
 
}
body {
height: 100%
}
<div class="a">
</div>

Upvotes: 0

j08691
j08691

Reputation: 207923

Your div has no content, and even though you gave it a height it has none since its parent has no height. Try adding a height to the parent like:

.a {
  background-color: #ff0000;
  height: 30%;
  width: 100%;
}
body,
html {
  height: 100%;
}
<div class="a">
</div>

As the docs on height state:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

Upvotes: 3

Related Questions