Question

我制作了一个网页，这是主要div的代码。

#Div {
    margin-left: 0px;
    position:absolute;
    margin-top: -1px;
    display: inline;
    float: left;
    margin-bottom: 0;
    background-color: #030;
    width: 660px;
    margin-left:-330px;
    left:50%;
    padding-top: 0px;
    height: 440px;
}

我是否可以使用css技术确保页面占用整个页面，无论浏览器所在的计算机屏幕大小如何。

Answer 1

最小高度：100％; min-width：100％;

并使用CSS重置 - http://meyerweb.com/eric/tools/css/reset/

Answer 2

为什么要设置margin-left两次？你为什么要浮动（并显示内联）一个你想要占据整个屏幕的div？设置负左边距将使整个div向左移动，因此即使在width: 100%时它也不会一直向右移动。

带走所有利润。做width:100%。将display:inline更改为display:block。带走浮子。如果将其设置为position:absolute，请务必指定： top：0px;左：0px

Answer 3

您希望将网页居中，而不是在小屏幕左侧切割？

使用以下内容：

#outer{
  text-align: center;
}
#inner{
  margin:0 auto;
  width: 660px;
  text-align: left;
}

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

Answer 4

也许你可以从CSS框架中获取一些灵感并去掉你需要的东西？ http://cssgrid.net/

Answer 5

  #container {
    background: blue;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    2border: 1px solid red;
  }



<div id="container"></div>

如何在任何大小的任何浏览器窗口中完整显示我的网页

5 个答案: