Home › Forums › JavaScript › Full screen div minus X px’s
- This topic is empty.
-
AuthorPosts
-
July 17, 2013 at 7:04 am #46432iknowdavehouseParticipant
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
July 17, 2013 at 7:35 am #143295Paulie_DMemberI’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
July 17, 2013 at 8:11 am #143300iknowdavehouseParticipantIf @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. July 17, 2013 at 8:36 am #143306Kitty GiraudelParticipantWhy JS when you can do the same in CSS?
.header {
position: absolute; // Or even fixed
top: 66px;
bottom: 0;
left: 0;
right: 0;
}July 17, 2013 at 8:53 am #143311Paulie_DMemberWe don’t want it 66px from the top.
July 17, 2013 at 9:01 am #143315Kitty GiraudelParticipant> 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;
}July 17, 2013 at 9:47 am #143320Paulie_DMemberI confess, I’m unsure as to the purpose behind this request but….whatever.
July 17, 2013 at 11:39 am #143357Eric GregoireParticipant+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.
July 19, 2013 at 8:06 am #143686DrCLueMemberheight:calc(100% – 66px);
could be useful perhaps.
July 19, 2013 at 8:08 am #143688Kitty GiraudelParticipant> height:calc(100% – 66px);
Clever, I like it. Too bad it’s still not widely supported.
July 19, 2013 at 9:59 am #143725Eric GregoireParticipantIf 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.