Question

如何让黑匣子达到全高？

当您点击下拉列表时，我希望整个背景为黑色。我试图做身高：100％与位置：abosulute但它似乎不起作用。请让我知道如何解决这个问题。如果你想帮助它也是一个额外的好处是创建一个动画，以便导航上的项目出现一个小延迟和淡入。感谢

我希望它看起来类似于www.domanistudios.com/mobile/

上的菜单/导航

Answer 1

您需要增加ul的高度，而不是body的高度。 body根据其中的元素具有高度。将ul menu类的高度增加到1000px。这应该可以满足您的需求。

.menu ul {
    display: none;
    height: 1000px;
}

Answer 2

您可以使用jQuery查找浏览器窗口的高度，然后将此高度应用于ul元素。一个简单的例子

小提琴：http://jsfiddle.net/8hKEd/

<html>
<head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#clickme').click(function(){
                $('#showme').css({'height' : $(window).height()});
                $('#showme').slideToggle('slow');


            });

        });
</script>
</head>
<body>

<a id="clickme" href="#">Click Me</a>

<ul id="showme" style="display:none; background-color: #000; color: #fff;">
    <li>
        Some Text
    </li>
    <li>
        Some Text
    </li>
    <li>
        Some Text
    </li>
    <li>
        Some Text
    </li>
</ul>
</body>
</html>

如何增加背景尺寸？

2 个答案: