0

我需要你的帮助。我一直在谷歌搜索，但我找不到我正在寻找的好技巧。所以我决定在这里写。请原谅我的英语不是我的母语。

我正在努力管理具有不同分辨率浏览器（大/小笔记本电脑屏幕）的全屏 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>

您的帮助将不胜感激。期待看到您如何解决。希望值得在这个论坛上写：）

问候

4

1 回答 1

0

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

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

于 2013-04-29T20:00:17.283 回答