0

I'm trying to create an image slideshow with a fixed ratio of 4:3, filling the whole viewport on a website with a fixed height header of 80px. How can I accomplish this?

This question is pretty close, but it's lacking the fixed header.

Any help?

The layout should be:

 -------------------------------------      -
| Header: height = 80px, width = 100% |     |
 -------------------------------------      |
    |          Main div           |         > Total height = 100%
    |      Fixed ratio = 4:3      |         |
    |          Centered           |         |
     -----------------------------          -


|------------------v------------------|
           Total width = 100%
Community
  • 1
  • 1
fseixas
  • 65
  • 6

1 Answers1

0

The following CSS does the trick:

body {
    margin: 0;
    padding: 0;
}
header {
    width: 100vw;
    height: 80px;
    background: red;
}
article {
    /* Get the height based on the available space (100 height - 80px) */
    height: calc(100vmin - 80px);
    /* Get the width based on the available space and aspect ratio (height /3 * 4) */
    width: calc((100vmin - 80px) / 3 * 4);
    margin: 0px auto;
    background: blue;
}
<header></header><article></article>

Using calc we can easily determine that we our bottom box to have a height of 100% - 80px, or calc(100vmin - 80px). From there, we can calculate the width of the object using the same calculation. I'm using vmin to account for behaviour on portrait screens.

somethinghere
  • 16,311
  • 2
  • 28
  • 42
  • Thanks for the input. That does work, except when the window height is larger than width, in which case it overflows the div instead of keeping it all in view. – fseixas Jul 23 '15 at 15:59
  • @fseixas I have amended it to use `vmin`, which negates this problem by giving me the lowest common denominator between the height and width of the viewport. – somethinghere Jul 23 '15 at 16:00
  • That does improve it, it is now resizing the height in this case, but there's still some overflow to the left, ie, width>vw. – fseixas Jul 23 '15 at 16:04
  • Hmmm I see what you mean. You could add a `max-width` at that point and say it shouldn't be wider than `100%` (or `100vw`) even though its actually cheating. – somethinghere Jul 23 '15 at 16:18
  • Yes, but while that cheat would prevent the overflow, it would not keep the aspect ratio. – fseixas Jul 23 '15 at 16:22
  • Thats why i called it a cheat. Theres just some things where cutting off 20 pixels wont make the difference. Ah well, i did my best. Cheers – somethinghere Jul 23 '15 at 16:24
  • Indeed! Thanks a lot anyway, I will use your solution for now. – fseixas Jul 23 '15 at 16:26