How to make my web page display in full in any browser window of any size

问题

I have made a webpage and this is the code to the main 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;
}

Is there a css technique i can use to make sure the page occupies the whole page no matter the size of the computer screen the browser is on.

回答1:

Why are you setting margin-left twice? Why are you floating (and displaying inline) a div that you want to take up the whole screen? Setting a negative left margin will move your whole div to the left, and therefore cause it to not reach all the way to the right even when the width: 100%.

Take away all margins. Do width:100%. change display:inline to display:block. Take away the float. If you have to set this to position:absolute, then be sure to specify: top: 0px; left: 0px

回答2:

min-height: 100%; min-width: 100%;

and use a CSS Reset - http://meyerweb.com/eric/tools/css/reset/

回答3:

You want to center your webpage, without beeing cut at the left on small screens?

Use following:

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

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

回答4:

Perhaps you can take some inspiration from a CSS framework and strip out the bits that you need? http://cssgrid.net/

回答5:

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



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

来源：https://stackoverflow.com/questions/4668789/how-to-make-my-web-page-display-in-full-in-any-browser-window-of-any-size

标签

css

cross-browser

webbrowser-control