在300像素的容器中製作100％寬度的div

我想在300像素的容器中製作100％的寬度div，它的可行性如何？嘗試後相對和absoulte沒有成功。在300像素的容器中製作100％寬度的div

.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/

來源

2013-01-07 lamberta

你的意思是，100％的窗口寬度？ –

沒有100％瀏覽器窗口，所以類.hundredProcent走出300px容器邊100％ – lamberta

我添加了另外一個DIV中div.hundredProcent具有以下樣式：

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

入住此更新fiddle。你不應該設置position:relative到.container或 .hundredProcent div的

來源

2013-01-07 09:59:55 vadim

謝謝，這個工程很棒！ – lamberta

這個解決方案的侷限性是父元素不應具有相對位置 – Buzz

你不能做到這一點的CSS孤單。使用Javascript;像這樣的東西

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

例如在onload處理程序中。

確保它適用於所有需要它的瀏覽器。我甚至不確定是否所有現代瀏覽器都實現了getElementsByClassName，因此您可能需要給該div一個id以正確識別它。

來源

2013-01-07 09:21:51

好吧，沒有這個不工作在ie8/ie7，它只能使一方100％:(http://jsfiddle.net/lamberta/dtGcS/ – lamberta

是的，那麼你需要給div一個ID並使用'getElementById'來使它在所有瀏覽器中都能正常工作，而div仍然位於容器div中，所以左邊緣是相同的作爲容器的左邊緣，你也必須調整它 –

或者，將div從容器中移出並且所有的麻煩都結束了 –

在300像素的容器中製作100％寬度的div

回答

相關問題