Change width so height fits in window screen?

I'm working with a responsive site and I want the homepage to not require any scrolling. Right now, it has a header (239px tall) and a footer (94px tall) and then Owl Carousel sliding through images in the middle of the page. The CSS on the Owl Carousel is at 100% width, which shows the whole image. But the way the slider is setup, if I change the container height to be window.innerHeight, it crops the image in the slider (still 100% width).

How can I have the Owl Carousel be a relative height that changes the width to the exact % width so that Header + Owl Carousel + Footer all fit the users browser window without having to scroll?