5 ms·

All I want is a sticky, permanent header and footer and the rest of the page for text. (without the text going behind the footer/header) Can grid do this? I rea

All I want is a sticky, permanent header and footer and the rest of the page for text. (without the text going behind the footer/header) Can grid do this? I really don't like using javascript frameworks, I'm trying hard to keep my stuff pure html5/css3.

wolco 7y ago
use the following attr on the element and put it on top for the header and bottom for the footer. position: fixed;
- arminiusreturns 7y ago
  To prevent header and footer eating text and nav? Also doesnt using fixed take it out of the grid?
  - wolco 7y ago
    You don't want those elements part of your grid.
btbuildem 7y ago
.foo { display: grid; grid-template-rows: 10% 80% 10%; height: 100vh; } <div class="foo"> <div>header</div> <div>text</div> <div>footer</div> </div>
- tux1968 7y ago
  Don't think that has the desired effect; at least if I understood the request properly. The text area won't get a scrollbar when more text is added to fill the view area. It seems in this case you would have to manually ensure that the text you gave could fit in 80% of the screen, or bad things happen visually. Also, the header and footer aren't permanent, they are affected by the entire-page scrollbar.
  - nicoburns 7y ago
    All you need is an `overflow-y: scroll` on the text element, and it will work as desired. The whole page won't have a scrollbar, because no content will be overflowing past it's boundaries. Grid is ideal for these kind of layouts.
    - tux1968 7y ago
      Thanks, that worked. Although I did still have to suppress the page scrollbar with "body { overflow-y: hidden; }" Not sure why.
      - snuxoll 7y ago
        Might need to use normalize or reset to deal with margin collapse, even then I’ve noticed the behavior at random times. The CSS box model is simple yet obtuse all at once.
- Izkata 7y ago
  That'll still shrink/stretch the header/footer based on window size, which usually isn't what you want (headers and footers usually being a static height). Really, this layout flows from top to bottom, so my instinct wouldn't even be to use grid - just leave the divs as blocks and give them the appropriate height: <div> <div class='header'></div> <div class='content'></div> <div class='footer'></div> </div> .header { height: 30px; } .footer { height: 20px; } .content { height: calc(100vh - 50px); overflow: auto; } Bonus: If you have to support it still, this version works all the way down to IE9.
neon_electro 7y ago
If the header and footer are permanent, what does the text do as you scroll the page if not going behind those elements?
- mkl 7y ago
  Maybe they want to avoid breaking scrolling with space and page down, which so many sites with headers and footers do by having the covered up text still count for positioning.
zozbot234 7y ago
HTML Frameset/Frames used to do that quite nicely. I'm not sure why they were removed in newer HTML standards, with no good replacement.

wolco 7y ago

use the following attr on the element and put it on top for the header and bottom for the footer. position: fixed;

arminiusreturns 7y ago
To prevent header and footer eating text and nav? Also doesnt using fixed take it out of the grid?
- wolco 7y ago
  You don't want those elements part of your grid.

btbuildem 7y ago

.foo { display: grid; grid-template-rows: 10% 80% 10%; height: 100vh; } <div class="foo"> <div>header</div> <div>text</div> <div>footer</div> </div>

tux1968 7y ago
Don't think that has the desired effect; at least if I understood the request properly. The text area won't get a scrollbar when more text is added to fill the view area. It seems in this case you would have to manually ensure that the text you gave could fit in 80% of the screen, or bad things happen visually. Also, the header and footer aren't permanent, they are affected by the entire-page scrollbar.
- nicoburns 7y ago
  All you need is an `overflow-y: scroll` on the text element, and it will work as desired. The whole page won't have a scrollbar, because no content will be overflowing past it's boundaries. Grid is ideal for these kind of layouts.
  - tux1968 7y ago
    Thanks, that worked. Although I did still have to suppress the page scrollbar with "body { overflow-y: hidden; }" Not sure why.
    - snuxoll 7y ago
      Might need to use normalize or reset to deal with margin collapse, even then I’ve noticed the behavior at random times. The CSS box model is simple yet obtuse all at once.
Izkata 7y ago
That'll still shrink/stretch the header/footer based on window size, which usually isn't what you want (headers and footers usually being a static height). Really, this layout flows from top to bottom, so my instinct wouldn't even be to use grid - just leave the divs as blocks and give them the appropriate height: <div> <div class='header'></div> <div class='content'></div> <div class='footer'></div> </div> .header { height: 30px; } .footer { height: 20px; } .content { height: calc(100vh - 50px); overflow: auto; } Bonus: If you have to support it still, this version works all the way down to IE9.

neon_electro 7y ago

If the header and footer are permanent, what does the text do as you scroll the page if not going behind those elements?

mkl 7y ago
Maybe they want to avoid breaking scrolling with space and page down, which so many sites with headers and footers do by having the covered up text still count for positioning.

zozbot234 7y ago

HTML Frameset/Frames used to do that quite nicely. I'm not sure why they were removed in newer HTML standards, with no good replacement.