css - if the child element depends on the height of the parent element

Home>2019-12-08 18:48

css - if the child element depends on the height of the parent element

[Current status]
Clicking the .button as shown below will ensure that the .bottom and its contents will be displayed from below
I want to do this, but even if I set the parent element .bottom to height: 0 ;, the child elements will not disappear in the first place.

[Question]
● This is true, but does it mean that the child element does not inherit the height of the parent element?

● I want to add an action with css and JS from the bottom by changing the height of the height of the parent element. In this case, generally
What ideas do you have? Even if you move opacity etc. from 0 to 1 because the height remains in .content, the element is
I can only think of the display as none or block because it will remain, but it may be short-circuited and cause other harms
I hope you can get a general idea.

Thank you.

JSFiddle

<body>
  
  <button>button</button>
   
     content 
   
  
</body>

html {
   height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
  background: blue;
}
.wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}
.bottom {
  position: absolute;
  bottom: 0;
  height: 0%;
  width: 100%;
  background: red;
   transition: 0.5s ease
}
.bottom_after {
  height: 10%;
}
.content {
  background: yellow;
  width: 10%;
}

$(function () {
 $('. button'). on ('click', function () {
   $('. bottom'). toggleClass ('bottom_after')
 })
})

css

Answer # 1
height is not inherited.
Reference: https://developer.mozilla.org/en/docs/Web/CSS/height

Therefore, since the child elements are coming out from the parent element whose height is 0,overflow: hiddenshould be specified in.wrapperthink.

Numbers etc. are appropriate, but if you look at the following, you will see the expected behavior in the same situation.

Operation Demo → https://jsfiddle.net/oft071up/
```
. wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.wrapper .bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #ccc;
  transition: height 0.5s;
}
.wrapper .bottom.bottom_after {
  height: 100px;
}
.wrapper .bottom .content {
  width: 10%;
  background: # 222;
}
```

Trends

TutorialFor

css - if the child element depends on the height of the parent element

Related articles