Question

我需要你的帮助。我一直在谷歌上搜索，但我找不到我想要的好建议。所以我决定写在这里。请原谅我的英语，这不是我的第一语言。

我正在努力管理具有不同分辨率浏览器（大/小笔记本电脑屏幕）的全屏幕css布局。 HTML Body在没有滚动的情况下可以完美地运行，但是包装（粉红色）似乎在不同分辨率下失控：包装（粉红色）适合大屏幕（1920 x 1200），但它不适合小屏幕（1280） x 800）导致滚动。我不想滚动。我需要所有东西以适应不同的分辨率而不滚动。

您可以使用颜色布局查看我的简单html和css代码。您可以复制它们并粘贴到您的标记中，以便您可以看到问题所在。专注于粉红色的。

CSS:

     <style type="text/css">
*{
    margin:0;
    padding:0;
}

html{
    /* This image will be displayed fullscreen */
    background:url('name.jpg') no-repeat fixed;

    /* Ensure the html element always takes up the full height of the browser window */
    min-height:100%;

    /* The Magic */
    background-size:cover;
}

body{
    text-align: center;  
    /* Workaround for some mobile browsers */
    min-height:100%;
}


section, footer, header{
    display: block;
}

footer{
    background-color: #111111;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
    height: 45px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 100000;
}
</style>


HTML MARKUP
    <body>
        <div class="header_container" style="background-color:orange; height: 150px;overflow: hidden;">


        </div> <!-- end of header_container container_12-->
        <div id="wrapper" style="background-color:pink; height:100%">

        <div class="featured_container1" style="height: 280px;width:100%;background-color:grey;">

        </div>


        <div class="featured_container2" style="background-color:red; width:300px; height:700px">


        </div>
</div>    <!-- wrapper End -->
        <footer style="background-color:green">

        </footer>

    </body>
</html>

我们非常感谢您的帮助。期待看到您如何解决。希望值得在这个论坛上写一下：）

此致

Answer 1

要停止粉红色包装，请将<div id="wrapper" style="background-color:pink; height:100%;">更改为<div id="wrapper" style="background-color:pink; height:auto;">

我还建议不要使用内联css，并将它全部放在样式表中:)。

css全屏在不同分辨率下的问题

1 个答案: