Question

Basically, I would like a page that consist of a slideshow that contains a slide, which has one div-element that needs to span the whole height of the browser/window, regardless if that div contains content that would make it span the whole height.

Also, the content should be centered with fixed width.

The problem is that, in order to have the div span the whole height, but dynamically span more (depending on content), you need to have min-height: 100%; However, min-height: 100% requires that the parent has a specific height, which in this case would have to be 100% in order to cover the whole browser/window. But, this makes the parent have fixed height, which is not preferred because of scrolling – rather it should also have min-height: 100% – but then we need to remove the height: 100% property from it which will break the original div’s behavior.

PS. A solution requiring JavaScript for changing size is not going to work. CSS-only solution is required

Sorry if it’s quite confusing – I’d love to explain more if you have any questions.

Thx

Answer 1

You can absolutely position the element and force it to span the entire height of it’s containing element by specifying 0 for both top and bottom:

div.slide {
   bottom: 0;
   position: absolute;
   top: 0;
}