CSS - 如何覆盖类的宽度大小

Question

代码：

<div id="pagewrap">
   <div id="test">
      asdf asdf asdf
   </div>
</div>

假设'pagewrap'id的固定宽度为980px css，但我希望test id的屏幕宽度大于980px。 通过使用CSS，这可能吗？

Answer 1

使用position: absolute;将您的孩子div设为100％;

Demo

CSS

#pagewrap {
    width: 980px;
    background-color: #ff0000;
}

#test {
    width: 100%;
    background-color: #00ff00;
    position:absolute;
}

Answer 2

你也可以给#test position:absolute并将其width:100%

做了一个小小的演绎，以证明：http://jsfiddle.net/MAAaD/

Answer 3

有几种解决方案，从最佳到最差列出。

1. 提供position: absolute和width: 100%。 （就像mr.alex之前所说过的那样）。
2. 将其拉出其父div，然后使用width: 100%。 （这可能会阻碍语义，但如果您想将其用作对话或其他内容，则效果很好。）
3. 使用JavaScript。 （只有当你有充分的理由不使用上述任何一个答案时）。

Answer 4

试试这个：

#pagewrap #test {
   width: 1000px !important;
}

Answer 5

尝试使用100％宽度。它涵盖了父标记的完整大小。

width:100%