Announcement

Collapse
No announcement yet.

Creating a full-height page template

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Creating a full-height page template

    Assigning column and row percentage widths is commonplace, but the same cannot be said for heights. This it would seem is a different proposition and so creating a full-height page template (a one size fits all browsers) is a near impossible task. . ?

    With is in mind, can someone please improve on my cheap imitation of a full-height page template: a fixed header and sticky footer to the browser bottom, and simply counting pixels to ensure the content does not exceed 700px (an arbitrary screen size).

    All suggestions most gratefully received. Thank you in advance for your time and trouble.

  • #2
    With is in mind, can someone please improve on my cheap imitation of a full-height page template: a fixed header and sticky footer to the browser bottom
    Chances are higher if you could provide a URL to your site so we can see the elements involved...?

    Comment


    • #3
      For 100% height you can try 100vh, if you need to account for fixed header/footer, I believe you will need to use jQuery to account for the difference.

      Comment


      • #4
        Unfortunately there is no URL as the site is on a localhost. I am using Dynamik Website Builder on the Genesis Framework. The fixed header code comes courtesy of Cobalt Apps https://www.youtube.com/watch?v=lEX_jJGeTrE and the fixed footer from http://stackoverflow.com/questions/1...m-of-page?lq=1

        If creating a full-height page template is unrealistic, then how best to stack 3 horizontal rows and assign them respective heights of 30%, 40% and 30% using Dynamik and custom CSS?

        Once again thank you in advance.

        Comment


        • #5
          Maybe Eyria is a start for you and you can go on from there: http://sg-layout.com/eyria/documentation/

          Setting rows to percentage heights might not be a good idea when it comes to mobiles. Content could be cut off, you´d have to set min-heights and use media queries.
          Last edited by SiGa; 07-06-2016, 05:41 PM.

          Comment


          • #6
            Thank you for the warning on the use of percentage heights regards mobile devices. I hadn't considered the consequences. And thanks for the link. It gives hope that a full-height page template is possible.

            Comment

            Working...
            X