0

我想在一个 300px 的容器中制作一个 100% 宽度的 div，这怎么可能？尝试 postiton relative 和 absoulte 没有成功。

.container { margin:0 auto; text-align:center; background-color:black; width: 300px;}
.normalOne { background-color:grey; height: 50px;}
.hundredProcent { background-color:blue; height: 50px; width:100%;}
.normalTwo { background-color:red; height: 50px;}

<div class="container">
  <div class="normalOne"></div> 
  <div class="hundredProcent"></div> 
  <div class="normalTwo"></div> 
</div>

这是一个小提琴http://jsfiddle.net/lamberta/2U893/

4

2 回答 2

1

我在其中添加了一个div.hundredProcent具有以下样式的附加 div：

style='position:absolute; background-color:yellow; height: 50px; width:100%;left:0px;'

检查这个更新的小提琴。你不应该设置position:relative为.container或 .hundredProcentdiv 的

于 2013-01-07T09:59:55.097 回答
0

您不能仅通过 CSS 来做到这一点。使用Javascript；像这样的东西

document.getElementsByClassName('hundredProcent')[0].style.width = 
    document.body.clientWidth+'px';

例如在onload处理程序中。

确保它适用于您需要它运行的所有浏览器。我什至不确定是否getElementsByClassName在所有现代浏览器中都实现了，所以你可能需要给 div 一个id来肯定地识别它。

于 2013-01-07T09:21:51.510 回答