Question

我有以下HTML，并且正文根据屏幕大小的长度而扩展，但我无法将DIV扩展到100％。任何帮助表示赞赏。感谢

<html >
    <head>
        <meta charset="UTF-8" />
        <title>xxxx</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
        <script type="text/javascript" src="carousel.js"></script>
        <script type="text/javascript" src="mousewheel.js"></script>
        <script type="text/javascript">       
            $(function() {
                $(".anyClass").jCarouselLite({
                    btnNext: ".next",
                    btnPrev: ".prev"
                });
                $(".mouseWheel .jCarouselLite").jCarouselLite({
                    mouseWheel: true
                });
        });</script>
    </head>
    <body style="background-color: black; background-size: 100% 100% height: 100%; min-height: 100%;">

        <div id="wrapper" style="width: 80%; margin-left: 10%; background-image: url(http://happps.com/marketing/dgblur.jpg);  background-size: 100% 100%; height: 100%;">
            ttttt
        </div> <!--wrapper-->
    </body>
</html>

Answer 1

首先 - 不要使用内联css

第二 - 使用meta：

第三 - 设置css媒体查询以更改宽度以更改纵向模式的样式：

@media screen and (orientation:portrait) {
    /* Portrait styles */
}

编辑：

哦，好的，将html和body height设置为100％，然后将div height添加到100％。应该有所帮助

html, body {
height: 100%;
}

在纵向模式下，如何使Div扩展以垂直适合屏幕

1 个答案: