CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JVG
JVG

Reputation: 21150

HTML div isn't displaying full height

I'm working on this relatively simple site:

http://harrisonfjord.com/folio/test.html

The images being displayed are 800x600; the div that they are in should push the bottom of the page down (so the menu/nav arrows are lower) but for some reason this isn't happening. Instead, the images are being cut off at about 550px on the y-axis.

I'm using swipe.js (controlled by the arrows below the folio images) alongside jQuery Cycle (controlled by the nav menu at the bottom). The Swipe script may be causing problems because it relies on overflow:hidden to navigate around the page, but figuring out anything more than this is beyond me.

Any ideas on how to fix this seemingly simple issue?

Upvotes: 0

Views: 302

Answers (2)

T23
T23

Reputation: 572

The Div #adSlideshow is only about 400~px, something else must be going on.
Can't you do #adSlideshow { height:800px; } ?

Upvotes: 0

Parzifal
Parzifal

Reputation: 1076

Your div does not have the correct auto-height because your div with the id asics has position:absolute. Absolute positioned elements are not respected when calculating a parent's height. Remove it or change it to position:relative.

<div class="adSlideBox" id="asics" style="top: 0px; left: 0px; opacity: 1; display: block; z-index: 7; ">

Upvotes: 1

Related Questions