I'm currently facing an issue with a layout tool that resizes multiple divs. These divs contain a title span which is positioned at the bottom : 0. When the divs are shortened, everything appears fine, but when they are lengthened, the spans end up floating above the bottom of the div.
I have experimented with different CSS methods to try and keep the span at the bottom, but it seems that once the rendering takes place, and the freewall (the layout script) does its job, the spans refuse to go back down.
I've tried to obtain the height of the parent DIV using various techniques. When I check the console log for the div, I can see its rendered height in the element.style (height: 222.4px); however, trying to access the style only returns the applied background image, not the actual rendered height. Any attempt to retrieve the height via jQuery .height() only gives me the CSS height (200px), which is incorrect.
Do you have any suggestions on how to make sure an element stays at the bottom after a layout resize, or perhaps a way to access the rendered height so I can programmatically position it back at the bottom?
Referencing the provided CSS:
.guideScene {
height: 200px;
width: 200px;
min-width: 190px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
}
@media all and (max-width: 768px) {
.guideScene {
height: 100px;
}
}
.guideScene span {
font-family: 'Lato', sans-serif;
color: #000;
font-weight: 700;
font-size: 14px;
line-height: 100%;
min-height: 14px;
background: #fff;
padding: 4px 10px 4px 10px;
bottom: 0px;
width: 100%;
position: absolute;
}
Additional information provided:
console.log( $(this.parentNode).outerHeight(true) );
console.log( $(this.parentNode).height() );
or console.log( $(this.parentNode).attr('style') - returns the background;
console.log(this.parentElement) provides the data I am attempting to access.
I am trying to access this specific attribute!