Full screen div minus X px’s

[iknowdavehouse]

Hello, I’m using this script to make a header full screen…

var windowWidth = $(window).width();
var windowHeight =$(window).height();
$(‘header’).css({‘width’:windowWidth ,’height’:windowHeight });

However i’d like it to be full screen -66px on the height. I rely entirely on copy/paste when it comes to any type of script. Any help would be appreciated!

Thanks

[Paulie_D]

I’m a novice when it comes to JS/JQ but I have a couple of (ignorant) questions.

Why are we using WindowWidth? Isn’t the header automatically 100% wide?

What does the marginTop get us other than pushing the header down? Don’t we want the header to reach towards the bottom of the screen **except** for the **bottom** 66px?

Can we not use something like

‘height’:windowHeight – 66 (px), // or however that is supposed to go

[iknowdavehouse]

If @paulie_d is a novice I am a newborn…

Thanks for the suggestion but yeah, I don’t want to add a margin / push down the header. I want to say 100% height, then -66px. This is to always accommodate a 66px height bar that’s directly under the header at the bottom of the screen.

No doubt I’m using

incorrectly. It’s transparent, showing though to a full width body background image and containing an h1 / intro.

[Kitty Giraudel]

Why JS when you can do the same in CSS?

.header {
position: absolute; // Or even fixed
top: 66px;
bottom: 0;
left: 0;
right: 0;
}

[Paulie_D]

We don’t want it 66px from the top.

[Kitty Giraudel]

> However i’d like it to be full screen -66px on the height.

Well… It doesn’t make much difference in the end.

.header {
position: absolute; // Or even fixed
bottom: 66px;
top: 0;
left: 0;
right: 0;
}

[Paulie_D]

I confess, I’m unsure as to the purpose behind this request but….whatever.

[Eric Gregoire]

+1 for @HugoGiraudel That should stretch the div top to bottom, but the bottom value will push the bottom of the div up 66px from the bottom of the window (or the parent in the case of absolute positioning) and the left and right at 0 will make the div fit as if it were 100%. No jQuery needed in this case.

[DrCLue]

height:calc(100% – 66px);

could be useful perhaps.

[Kitty Giraudel]

> height:calc(100% – 66px);

Clever, I like it. Too bad it’s still not widely supported.

[Eric Gregoire]

If I had to chose a CSS function that I wish would manifest itself physically so I could hug it for being awesome, calc() would be it.

[Author]

Posts