Question

我正在尝试根据窗口高度大小在div上设置填充。我简直找不到一种更好的工作方式来将我的内容div垂直放在另一个具有未知尺寸的div中。我的代码如下：

<script>
    $(document).ready(function(){ 
        var window_height = $(window).height();
        var home_content = $('#home-content');

            if(window_height <= 600) {
                home_content.css({"padding-top", "13px"});
            } else if(window_height > 600 && window_height <= 768) {
                home_content.css({"padding-top", "97px"});
            } else if(window_height > 768 && window_height <= 800) {
                home_content.css({"padding-top", "113px"});
            } else if(window_height > 800 && window_height <= 900) {
                home_content.css({"padding-top", "163px"});
            } else if(window_height > 900 && window_height <= 1050) {
                home_content.css({"padding-top", "238px"});
            } else if(window_height > 1050 && window_height <= 1080) {
                home_content.css({"padding-top", "253px"});
            } else if(window_height > 1080 && window_height <= 1200) {
                home_content.css({"padding-top", "313px"});
            } else {

            }
     });
    </script>

它不起作用。我的网站卡在预加载器上，根本不会加载任何东西。我做错了什么想法？

Answer 1

尝试更改：

{"padding-top", "13px"}

为：

{"padding-top":"13px"}

依旧......

注意

问题是你可以用两种方式用jquery分配css样式：

$("#element").css('padding', '30px');

（如果您要编辑/添加一个样式设置），或者：

$("#element").css({'padding':'30px'});

（使用此方法，您可以根据需要添加多少设置，只需将它们与,分开，然后将它们与@dollarvar区分开来以指出这一点。

代码中的问题是你有一个，而不是：。

Answer 2

试试这个，你可以删除{}并使用

 home_content.css("padding-top", "13px");

而不是

home_content.css({"padding-top", "13px"});

Answer 3

作为替代JavaScript hack的替代方法，您可以使用CSS Media Queries来指定要应用的CSS规则（example）。它确实取决于您需要支持的浏览器http://caniuse.com/css-mediaqueries。

@media (max-height : 599px) {
    #home-content { padding-top: 13px; }
}

@media (min-height : 768px) {
    #home-content { padding-top: 97px; }
}

@media (min-height : 800px) {
    #home-content { padding-top: 113px; }
}

@media (min-height : 900px) {
    #home-content { padding-top: 163px; }
}

...

当您调整浏览器窗口大小时，这也会自动更改填充，这与响应式设计使用的技术相同。

修改

但是，重新阅读你的实际问题，看起来你正试图在一个容器内垂直居中一个div。你真的不需要使用任何Javascript，你可以用CSS完全做到这一点，它会更顺畅：http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

html, body { height: 100%; margin: 0; padding: 0; } .container { height: 100%; position: relative; } #home-container { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid red; }

codepen example

jQuery多个if语句

3 个答案:

注意