[Support request] fixed page height?

[Mark]

My pages are too long – I would like them to fit on one screen without having to scroll.

If memory serves, when page layout with CSS was just starting, there were designs that had a fixed height per page. (Maybe I am just thinking of a fixed width, I’m not sure). I know that (at least with generate press) the footer gets pushed down to the bottom of the page, but I don’t know what controls (or even if it can be controlled) the height of the content area above the footer.

For example, on my home page, I would like to reduce the amount of Realestate below the two images and before the footer. Is this even possible to do? I remember that the height of a page depends on the content – maybe I could set the bottom padding or margin to a small number? But how would I do this?

Thanks for your thoughts.

Mark

[Leo]

Hi there,

I don’t think there is a good to set the maximum height of a page, otherwise the content would be cut off.

You can try using the layout metabox if it’s just for one page:
https://docs.generatepress.com/article/footer-widgets/#change-the-number-of-footer-widgets-on-individual-pages-posts

or Layout Elements if you’d don’t want to set it per page basis:
https://docs.generatepress.com/article/layout-element-overview/#footer

Let me know if this helps 🙂

[Mark]

Leo,

I understand what you are saying. At the same time, there must be something in the code that, for example, is setting how high the content area in that home page is supposed to be, e.g., some margin or padding in the content area where the two pictures are inserted. How does the page “know” how much space to leave below the pictures?

Personally, I prefer a long front page with scrolling, but I am designing this is some really tech newbies that don’t even know they are supposed to scroll!

Mark

[David]

Hi there,

so this CSS you have on your site to force the footer to the bottom of the viewport:

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

#page {
    flex: 1 0 auto;
    width: 100%;
}

The way this works is that the body becomes a flex column. Elements within this can be manipulated for size and position. Your #page ( the content ) has a flex: 1 0 auto; property, this is shorthand for flex-grow: 1 ( True – i can and will grow ), flex-shrink: 0 (False – i will not shrink ) and flex-basis: auto ( the preferred height, in the case of a flex column, that i want to be).

So the additional space below the content is responsive. Although you could change the flex property to set a preferred size it would mean the footer would also move up…. so there isn’t really a solution to this without allowing the footer to float up.

[Mark]

Hi David,

Thanks for your response. I am a little confused about what you are saying. Is the CSS you provided already on the page, or were you suggesting I ADD this to the page? So there is no way to keep the footer at the bottom of the page if I control the content height of the page?

Mark

[David]

That CSS is already on the Site you provided the link to 🙂 And is what currently keeps the Footer at the bottom of the browser viewport.

Can you clarify what you mean by controlling the content height? Do you want the content to scale to fit what space is available? ( which will be tricky ).

[Mark]

David,

I am helping a friend by designing a site for her. Her customers are not tech savvy at all, so she thinks they won’t scroll down to see what is in the footer. As a consequence, she would like the (at least the front page) page to all fit on one screen, without having to scroll. So I was thinking that it would if the main content area was shorter.

Mark

[David]

Right ok – so looking at the page on the most common size screen of 1366 x 768px, yes the footer isn’t visible. The fix to this would be to reduce the size of the content on the page. So make the images smaller, reduce the header size etc….

[Mark]

Thanks David,

I have made the images smaller – it just seems there is a lot of empty space below the images that is forcing the page height to be longer than it needs to be.

Mark

[Author]

Posts