当屏幕分辨率/大小改变时HTML页面不同

Question

我在根据屏幕重新缩放页面时遇到了问题。我在我的笔记本电脑上写代码，看起来还不错，但当我在桌面上用更大的屏幕打开这个页面时，它看起来并不好。

    div.fullWidth {
        width:100%; 
        height:100%; 
}

这就是我在我的CSS文件中尝试的，但它也不起作用。

Answer 1

使用CSS3，轻松解决问题：

div
{
 resize:both;
 overflow:auto;
}

不带CSS3的(或)

只需要把你的宽度和：

body{
    position: absolute;
    margin: 0 auto;
}

Answer 2

height: 100%将不起作用，请尝试使用100vh

div.fullWidth {
    width:100%; 
    height:100vh; 
}

浏览器支持here

Answer 3

如果你创建了一个自适应设计，这将帮助你引导框架，但如果你创建了一个固定的设计，主包装器必须指定宽度，如下所示

<div class="fullWidth"></div>



.fullWidth {
  display: block;
      background: #ddd;
      margin: 0 auto;
      height: 500px;
      width: 100%;
       min-width: 960px;
}