Question

I found this awesome .js called kinetic. I’ve been messing with the html, css for sometime now and am unable to set the container to full screen.

http://designobvio.us/v4design/demo.html

I’ve set all the parents to 100% height and tried a fullscreen jQuery. Unfortunately still no luck.

I’ve paired down the code as much as possible for readability. As you can see I’ve set the height to just 400px because it just goes crazy otherwise. If there’s any thing else i can offer as support, please don’t hesitate to ask.

As a second request would anyone have any idea how to set the border to inside. Or make sure that the width fits nicely with borders as is?

Answer 1

You can position your #wrapper div absolutely and just stretch it in all directions with the top, right, bottom, left properties like so:

CSS

#wrapper {
    border: 5px solid #000000;
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}

With this method the borders play nicely with the positioning, but if you want to place them inside your container you can set the border style to inset instead of solid. Also, your control buttons will disappear so to make them pop in front of your image just set them to position:relative and give them a large z-index so they appear on top of everything else.