与不同分辨率的CSS全屏问题

我需要你的帮助。我一直在搜索，但我找不到我想要的好贴士。所以我决定写在这里。请原谅我的英语，这不是我的第一语言。与不同分辨率的CSS全屏问题

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

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

问候

来源

2013-04-29 user1358072

要停止粉红色包装滚动变化<div id="wrapper" style="background-color:pink; height:100%;">到<div id="wrapper" style="background-color:pink; height:auto;">

我也建议不要使用内联CSS，并把它都在你的样式表也:)。

来源

2013-04-29 20:00:17 user2313440

它的工作。谢谢。但我看到粉色包装的高度尺寸在小/大分辨率中不一样。我需要以不同的分辨率固定相同的尺寸。可能？ – user1358072 2013-04-29 20:31:44

你需要什么尺寸的粉红色包装留在？ – user2313440 2013-04-29 22:53:41

不确定....我只需要具有完全相同高度尺寸的包装，以自动满足不同分辨率下页脚的一面。在不同的分辨率下，包装高度尺寸不能看起来很大或很小。它应该是一个固定的高度尺寸。希望你明白我的意思。 – user1358072 2013-04-30 08:18:46

与不同分辨率的CSS全屏问题

回答

相关问题