[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')
})
})
-
Answer # 1
Related articles
- about specifying element height with% in css
- css - i want to change the height of the parent element according to the height of the child element
- css - when using flex, i want the text to be centered with the element height unchanged
- css - font size to be specified for child element is not reflected
- css - i want to place the first child element side by side with flex just in the center
- css - if you use :: before, the child element disappears
- i want to match the width of the css child element
- css - i want to change the height of an element without changing the font-size
- css - the height of the header list and the header logo do not match
- css - area outside the element? i want to erase
- html - when hovering a child element, i want to color the child element of the sibling element of the parent element
- html - i want the child element of flexbox to be exactly trisection of the parent element
- css - small element shift due to fixed
- when the child menu is opened with the pull-down menu in html/css, the text is misaligned
- javascript - i want to assign the height of each element to each element
- html - is it a problem to put a div element as a child element of the label element?
- element overlay html, css
- javascript - how to create a canvas and add the canvas to a child element
- i would like to know how to apply different css only to the last element in the element group rendered by arraymap
- how to apply css file to dom element created by jquery
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: hidden
should be specified in.wrapper
think.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/