容器內的div寬度大於容器寬度

我們希望頁面上的頂部欄與瀏覽器的寬度一樣寬。問題是，它在一個容器div內。如果將它從容器中拉出來，我們可以將div擴展到主體寬度，但是當它位於容器內部時，它只能展開到容器的寬度。容器內的div寬度大於容器寬度

是否有解決方案，我們可以通過該解決方案來擴展頂部欄通過容器div。

<div id="container"> 
    <div id="topBar"> 
     <p>The Paragraph</p> 
    </div> 
</div>

來源

2012-10-18 S. A. Malik

你的代碼是什麼？取決於它是如何構造的以及發生了什麼溢出，它可能是可能的 –

@SvenBieder：我發佈了代碼，沒有給出溢出。只使用簡單的高度和寬度。 –

你可以賦予'＃topBar'絕對定位，它可以將流量從流量中移除，使流量達到100％的寬度，而＃容器則保持其他任何寬度。 – j08691

可以定位#topBar絕對沒有使它相對於它的直接父

html, body { 
    height: 2000px; 
} 

#container { 
    width: 50%; 
    margin: auto; 
    height: 200px; 
    background: beige; 
} 

#topBar { 
    position: absolute; 
    left: 0; 
    background: #ccc; 
    width: 100%; 
}

DEMO

來源

2012-10-18 17:39:36

這就是我的想法，儘管他可能會希望把一些邊距上的#container以確保它不」 t落在#topBar下，對吧？或者'margin：auto;'將它垂直居中還是水平居中？ –

@zoltan：如果段落是兩個div，那麼同樣的解決方案會起作用嗎...我的意思是還有一個頂部div放在哪裏的div div？ –

@backTangent你可以編輯JSFiddle來反映你的情況嗎？ –

另一種可能是從與位置文檔流中刪除：絕對的。但是，您需要知道topBar的高度，並且必須通過強制其餘內容的頂部邊距將其保留在topBar下方來進行補償。

例如，你可以這樣做：

#topBar { 
    position:absolute; /* fixed might also work, here */ 
    top:0; left:0; 
    width:100%; 
    height:50px; 
}

，但你也得有：

#container { 
    margin-top:50px; /* or more */ 
}

然而，這將打破，如果你需要做的#container position:absolute或position:relative 。

來源

2012-10-18 17:40:32

容器內的div寬度大於容器寬度

回答

相關問題