HTML / CSS包装问题

Question

can you help me with this wrapping stuff... When I resized the browser window then everything starts to move around. I managed to fix it with this one:

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

but now website is too tiny. I want that it would be full screen, not 960px width.. When i make width and height auto, then everything starts to move again. WHat to do?

Answer 1

There is a problem about your styling, you use percentage for every measure, this means adapt your position based on parent side, parent is window size here.

So it's normal everthings moving if you don't limit the wrapper width.

You can use min-width to handle this.

#wrapper {
       margin: 0 auto;
       min-width:960px;
   }

Answer 2

Normally this CSS should work:

#wrapper {
    margin: 0 auto; /*center div => only alternative of your version*/
    min-width:960px;
    width: auto;
}

Answer 3

I suspect you want something like this:
http://codepen.io/simply-simpy/pen/aOyoZM

* {
  margin: 0
}
html,body,wrap {
  height: 100%;
}
.content {
  width: 960px;
  margin: 0 auto;
  background: #eee;
  height: 100%;
  font-size: 36px;
}
.wrap {
  background-image: url('https://placeimg.com/640/480/arch');
  height: 100%;
  background-size: cover;
}

<div class="wrap">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>