导航栏固定怎么设置内容距离导航栏高度

Question

顶部固定，原本是设置内容距离顶部50px，但是当浏览器缩小时，还是挡住了下面的内容，设成百分比在大屏时，内容和顶部有一大段空白距离，这样子的话应该怎么设置导航栏与内容之间的距离

Answer 1

移动端页面，一般最小宽度是320。再小就是按键机了吧，你还有必要去做适配吗？

Answer 2

@media all and (max-width: 1200px) {
    .container {
        margin-top: 50px;
    }
}

@media all and (max-width: 768px) {
    .container {
        margin-top: 100px;
    }
}

已上代码IE9+，若要兼容IE9一下，可以用JS

var obj = $(window),
    container = $('.container');
obj.on('resize', function () {
    var width = obj.width();
    
    if (width > 768) {
        container.addClass('container1')
    } else {
        container.addClass('container2')
    }
})

Answer 3

可以试试用js，在页面初始化时，获取导航栏的高度，来设置内容距离顶部的距离

Answer 4

如果上面的header和下面的内容是兄弟节点的话，在header上使用sticky就可以了。