CODEWITHSUNDEEP
htmlcsssafari
DavidTran
DavidTran

Reputation: 68

Safari - Children elements height more than parent

I have 3 div, it looks like this:

<div class="parent">
   <div class="header"></div>
   <div class="content"></div>
</div>

Height of .parent is 100% Height of .header is 50px Height of .content is 100%

In Chrome it works fine but in Safari, the height of .content and .header is more than .parent height.

For example, if .parent is 600px. Height of .header and .content is 700px.

I've tried with cal(100% - 50px) then it works for Safari but in Chrome, the .content height is shorter.

Please help. Thanks.

Upvotes: 0

Views: 719

Answers (1)

Adrian Rios
Adrian Rios

Reputation: 44

It is calc not cal. I think this is not an error because you have 100% height of content which will become the same size of parent and addition height of header that is why he height of .content and .header is more than .parent height.

check this pen, calc is working fine: https://codepen.io/adrianrios/pen/OmRXpE

*{
  box-sizing: border-box;
}
.parent{
  height: 300px;
  width: 50%;
  margin: auto;
  background: pink;
}

.header{
  width: 100%;
  height: 50px;
  border: 1px solid red;
}

.content{
  width: 100%;
  height: calc(100% - 50px);
  border: 1px solid blue;
}

Upvotes: 1

Related Questions