0

i have 4 links of equal height that should be vertically spaced according to the height of your browser window, so the spacing in between them will vary if you increase or decrease the height of your browser window.
i was thinking of a layout like this question, but i want the divs (in my case, links) to be vertically stacked.

i have no clue how to do this so my code is pretty basic. here's a fiddle i guess? i would prefer a css-only solution, but if this can only be achieved via javascript or something, please give me an explanation! i am very bad at js.

#links { 
    position:fixed;
    height:100%;
    width:150px;
    left:65px;
    background:lightslategrey; }
#links a {
    text-decoration:none;
    position:relative;
    display:inline-block;
    padding:5px;
    height:25px;
    width:100%;
    margin-bottom:10px;
    color:white;
    text-align:center;
    font:25px consolas; }
Community
  • 1
  • 1
ampora
  • 43
  • 8

1 Answers1

0

Please check following fiddle link.. I've explained everything in js code with comments.

http://jsfiddle.net/fPJhx/16/

//Register Event so it run on page load..
$(document).ready(function(){
    //Register another event which call the script on window resize..
    $(window).resize(function()
    {
        //Call this function on resize
        adjustSpacing();
    });
    //Call this function on first load
    adjustSpacing();
});

function adjustSpacing()
{
    //Calculate window height
    var h = $(window).height();
    //Calculate height of 1st link
    var linkH = $("#links a").first().height();
    //Get total number of links
    var totalLinks = $("#links a").length;
    //Calculate top padding and bottom padding for each link
    var space = (h - (totalLinks * linkH)) / (totalLinks*2 + 1);
    $("#links a").each(function(){
        //Apply padding on each link
        $(this).css("padding-top", space);
        $(this).css("padding-bottom", space);
    });    
}

Thanks

razahassank
  • 195
  • 8
  • Wow thank you so much! I do have 2 questions though- at one point when you're making the browser window shorter, the last link's margin from the bottom gets smaller and smaller until the link disappears from view. is there a way to keep the last link's margins consistent like the other links? also, how would you apply this js to 2 elements on the webpage? – ampora Dec 24 '14 at 23:09
  • Check code at http://kl1p.com/xX0T .. After certain height it will not work because each link have their own height and all the links have relative position. Thanks – razahassank Dec 25 '14 at 06:29