Question

我遇到了一个CSS问题，我需要一些建议。我有一个包含固定宽度的100％div。在27＆＃34;，一切看起来都很好 - 黄色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%;
}

<强> Working demo

希望这有帮助。

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中使用min-width样式属性（比如相同的内部宽度值）

jsfiddle demo

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

4 个答案: