1. Post #1

    March 2017
    15 Posts

    I'm trying to stretch the side-bar to the bottom of the page persistently, not just when there's content there, much like a navigation bar where you can stretch it indefinitely.

    Could anyone help? I'm not a designer by any means.

  2. Post #2
    EoD's Avatar
    May 2007
    18 Posts
    I've never been much of a frontend guy, however from past knowledge:

    You can use "min-height: 100vh" (see http://caniuse.com/#search=vh for infos on "vh" ) in newer browsers. However since this is a percentage this means e.g. margin top/bottom will cause a scrollbar to appear (because now your sidebar is 100% of viewport height and e.g. has an additional margin of 51px on top - thus a scrollbar appears)

    How to fix the rest I leave up to you.


    To be honest the html structure doesn't look that clean, especially because you have the sidebar as child element of the header. This will probably not be nice to work with if you want to use media queries to make this reponsive in a nice way (if this is even the plan)

  3. Post #3

    March 2017
    15 Posts
    In all honestly all my knowledge is server side, and back-end php, this is my first 'real try at front-end sadly.

    Any suggestions or improvements are welcomed I'd like to learn more.

  4. Post #4
    Cow Muffins's Avatar
    August 2009
    565 Posts
    You should be able to use calc to subtract the 51px from the 100vh.
    Reply With Quote Edit / Delete Reply Windows 10 Chrome United States Show Events Agree Agree x 1 (list)

  5. Post #5
    Everyone has a $1 title
    Skipcast's Avatar
    November 2008
    6,755 Posts
    Be wary of calc though as it's not supported in IE10 and down.

    Reply With Quote Edit / Delete Reply Windows 8.1 Chrome Sweden Show Events Agree Agree x 1 (list)

  6. Post #6

    March 2017
    15 Posts
    Thanks guys I've fixed my issue now, thank you for the responses :)