100％Div，带有居中，固定宽度的内部Div

I ran into a CSS problem where I need some advice. I have a 100% div that contains a fixed-width. On 27", everything looks fine - the yellow div is perfectly centered.

我遇到了一个CSS问题,我需要一些建议。我有一个包含固定宽度的100%div。在27“,一切看起来都很好 - 黄色div完全居中。

When I resize the window, the yellow fixed bar still is visible, but as soon as you scroll rightwards, the 100% div does not resize to the current width.

当我调整窗口大小时,黄色固定条仍然可见,但只要向右滚动,100%div就不会调整为当前宽度。

<html>
    <head>
        <title></title>
    </head>
    <body>

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />    

    <style type="text/css">    

    #footer {
      background-color: #333333;
      color: #ffffff;
      margin-top: 35px;
      padding-bottom: 30px;
      padding-top: 15px;
      position: relative;
      bottom: 0px;
      font-size: 90%;
    }    

    #inner {
      background-color: #feb400; 
      width: 960px;
      margin-left: auto;
      margin-right: auto;
    }    

    </style>    

  <body>
    <footer id="footer">
      <div id="inner">lorem ipsum div.</div>
    </footer>
  </body>
</html>

http://jsfiddle.net/nghg4zd5/

I would like to have the black, 100%-div always beeing resized. How can I achieve this?

我想要黑色,100%-div总是重新调整大小。我怎样才能做到这一点?

Thanks.

4 个解决方案

#1

Try this, you should use min-width style property in 100%div (like same inner width value)

试试这个,你应该在100%div中使用min-width样式属性(比如相同的内部宽度值)

jsfiddle demo

#2

You are trying to make a relative change affect a fixed change (in pixel). To achieve that, you need to set the inner div to have a relative width (i.e in percentage) to make it visible on the right stretch (as per your fiddle).

您试图使相对更改影响固定更改(以像素为单位)。要实现这一点,您需要将内部div设置为具有相对宽度(即以百分比表示),以使其在右侧拉伸时可见(根据您的小提琴)。

For instance,

#inner {
    background-color: #feb400;
    margin-left: auto;
    margin-right: auto;
    width: 92%;
}

Working demo

Hope this helps.

希望这可以帮助。

#3

In order to have your div width 100% you have to make its parent (containing div) here the body having a fixed width:

为了使你的div宽度为100%,你必须在这里使其父(包含div)具有固定宽度的主体:

Try this for example:

试试这个例子:

body {
  width: 960px;
}

#4

You need width:100%; with a max-width:960px;

你需要宽度:100%;最大宽度:960px;

#inner { background-color: #feb400; width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; }

#inner {background-color:#feb400;宽度:100%;最大宽度:960px; margin-left:auto; margin-right:auto; }

#1