jquery - header 固定但响应内容

Question

示例问题: http://jsfiddle.net/yrbvw473/43/

我只希望顶部的边距内容是平衡的。如果在小宽度浏览器中，标题将有两行，如果这样我希望内容离顶部更远。如果三个标题有 3 行远处的顶部和内容得到更多..

我有 CSS 代码:

    @media (max-width: 990px) {
    .heads_search{
        top:40px;
    }
    #space_top{
        height:50px;
    }
}
@media (max-width: 767px) {
    .heads_search{
        top:60px;
    }
    #space_top{
        height:160px;
    }
}
@media (max-width: 390px) {
    .heads_search{
        top:100px;
    }
    #space_top{
        height:200px;
    }
}

但这并不是 100% 正确的，所以如果有人有更好的主意？

Answer 1

添加一个小脚本来调整 margin-top 属性。尝试这样的事情。

$( window ).resize(function() {
  $('#content').css('margin-top', 50 + $('#header').height());
});