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

Question

我遇到了CSS问题，需要一些建议。 我有一个100％的div，其中包含固定宽度。 在27英寸上，一切看起来都很好-黄色div完美居中。

当我调整窗口大小时，黄色的固定条仍然可见，但是当您向右滚动时，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/

我想调整一下100％div的黑色黑色的尺寸。 我该如何实现？

谢谢。

Answer 1

您试图使相对变化影响固定变化（以像素为单位）。 为此，您需要将内部div设置为具有相对宽度（即百分比），以使其在正确的范围内可见（根据您的小提琴）。

例如，

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

工作演示

希望这可以帮助。

Answer 2

为了使div宽度为100％，您必须在此处将其父级（包含div）设置为固定宽度：

尝试以下示例：

body {
  width: 960px;
}

Answer 3

您需要width:100%; max-width:960px;

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

Answer 4

尝试此操作，您应该在100％div中使用最小宽度样式属性（例如相同的内部宽度值）

jsfiddle演示

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

问题描述

4 个解决方案

解决方案1
0 2014-11-21 10:20:25

解决方案2
0 2014-11-21 10:22:06

解决方案3
0 2014-11-21 10:36:24

解决方案4
0 已采纳 2014-11-21 10:53:14

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

问题描述

4 个解决方案

解决方案1 0 2014-11-21 10:20:25

解决方案2 0 2014-11-21 10:22:06

解决方案3 0 2014-11-21 10:36:24

解决方案4 0 已采纳 2014-11-21 10:53:14

解决方案1
0 2014-11-21 10:20:25

解决方案2
0 2014-11-21 10:22:06

解决方案3
0 2014-11-21 10:36:24

解决方案4
0 已采纳 2014-11-21 10:53:14