Question

我有4个相等高度的链接，应根据浏览器窗口的高度垂直间隔，因此如果增加或减少浏览器窗口的高度，它们之间的间距会有所不同。
我是考虑像this question这样的布局，但我希望div（在我的情况下，链接）是垂直堆叠的。
我不知道如何做到这一点所以我的代码非常基本。我猜here's a fiddle？我更喜欢仅限css的解决方案，但如果这只能通过javascript或其他方式实现，请给我一个解释！我在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; }

Answer 1

请检查以下小提琴链接..我已经用js代码解释了所有注释。

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);
    });    
}

由于

流体高度等间隔div

1 个答案: