Home › Forums › JavaScript › Full screen div minus X px’s
- This topic is empty.
-
AuthorPosts
-
July 17, 2013 at 7:04 am #46432
iknowdavehouse
ParticipantHello, 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_D
MemberI’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 #143300iknowdavehouse
ParticipantIf @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 Giraudel
ParticipantWhy 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_D
MemberWe don’t want it 66px from the top.
July 17, 2013 at 9:01 am #143315Kitty Giraudel
Participant> 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_D
MemberI confess, I’m unsure as to the purpose behind this request but….whatever.
July 17, 2013 at 11:39 am #143357Eric Gregoire
Participant+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 #143686DrCLue
Memberheight:calc(100% – 66px);
could be useful perhaps.
July 19, 2013 at 8:08 am #143688Kitty Giraudel
Participant> height:calc(100% – 66px);
Clever, I like it. Too bad it’s still not widely supported.
July 19, 2013 at 9:59 am #143725Eric Gregoire
ParticipantIf 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.