CSS水平延伸樂隊

-1

我已經從星期日試過了這七種方法，並且我一直在短小。CSS水平延伸樂隊

色帶或什麼擴展到可見頁面的限制似乎是在互聯網論壇/博客中的一個非常普遍的請求，但是對於我遇到的兩個主要場景中的每一個都同樣令人沮喪的問題使任一解決方案站不住腳。在我感到沮喪的時候，我轉向了這裏。

HTML

<body> 

<div class="container"></div> 

<div class="content-container"> 

    <div class="content"> 

     Hello, I need some text that extends for a bit, so I'll just write this in the div and all will be good. 

    </div> 

</div> 

<div class="container"></div>

方案1 您設定爲寬度的div容器：100％，然後一個孩子的div在一個固定的寬度和餘量：0汽車;這有效地將該div有效地延伸到visibel屏幕的末端。

html, body { 
width: 100%; 
} 

.container { 
height: 20px; 
background-color: #377ab7; 
margin: 0 auto; 
} 

.content-container { 
height: 100px; 
margin: 0 auto; 
} 

.content { 
width: 300px; 
}

方案1個問題 當屏幕被調整，讓孩子div的固定寬度過大，會出現一個滾動條的窗口。這是非常好的，但是當你使用滾動條時，擴展的顏色帶只能延伸到可見窗口的100％。

小提琴1（您需要調整瀏覽器窗口的大小以達到固定寬度內容div的大小，然後使用滾動條，您會看到藍色條帶不會超過窗口大小的100％。） https://jsfiddle.net/b1dht69u/2/

方案2 您設置溢出-X：隱藏在主體上並且然後運行一個非常高的負緣，與相應的正填充。

body { 
overflow-x: hidden; 
} 

.container { 
height: 20px; 
background-color: #377ab7; 
margin: 0 -9999px; 
padding: 0 9999px; 
} 

.content-container { 
height: 100px; 
margin: 0 -9999px; 
padding: 0 9999px; 
} 

.content { 
width: 300px; 
}

這是絕對好的，直到你再次嘗試調整屏幕大小。

場景2問題 當您調整過去子div的固定寬度的大小時，不會出現滾動條。

小提琴2 https://jsfiddle.net/mnodvLvg/1/

我所尋找的是兩全其美的。我希望有一個顏色條在任何時候都延伸到可見頁面的末端，但是當瀏覽器調整大小超過內部div的固定寬度時，會出現滾動條。

來源

2015-07-21 ashcanschool

注意，ID **必須是唯一的。 – j08691

你的意思是像這樣 - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen –

我不知道你的實際問題是什麼但是您可以通過在'html，body {}'選擇器中添加'margin：0;'來修復第一個小提琴中的滾動條。 – TylerH

這是一個奇怪的問題，我從來沒有給出太多的想法，因爲我主要使用響應式佈局。

但是，Nicholas Cerminara的there is a nice article關於處理固定寬度佈局問題。

關鍵是要在您的CSS中設置body{}和/或html{}的min-width。

有趣的是，堆棧溢出使用這種技術來防止他們的頂部導航欄在您調整窗口大小時破壞。只需在此網站上打開您的Web瀏覽器DOM瀏覽器並禁用以下樣式規則： body{min-width:1030px;}和html{min-width:1000px;} 您將看到頂部導航欄打破其佈局並且遇到同樣的問題。

來源

2015-07-21 15:29:27 CreMedian

這種情況2與9999px的東西其實很髒，忘了它。

如果你檢查div，你會發現問題不是來自div.container本身，而是來自身體。

我會解決這個問題：

html, body { 
    position: absolute; 
    min-width: 100%; 
    width: auto; 
}

提醒一下，不要忘記，ID必須是唯一的。在這種情況下更好地使用類。

另一個想法可能是忘記那些.container DIV，實際上爲.content-container創建邊界，但我不知道你確切想要做什麼。

#content-container { 
    height: 100px; 
    margin: 0 auto; 
    border-top: 20px solid #377ab7; 
    border-bottom: 20px solid #377ab7; 
}

好運！

來源

2015-07-21 15:24:10

如果您的內容div的寬度固定，您可以在body標籤上設置相同或更大的min-width。這將保證它不能小於你的內容。

html, body { 
    width: 100%; 
    min-width: 300px; 
    margin: 0; 
}

來源

2015-07-21 15:29:43 bearfriend

這只是爲整個頁面添加一個滾動條......這是正確的想法，但與你需要做的事情相反。請改用#content上的最大寬度。 – TylerH

這沒有任何意義。無論哪種方式都會有一個滾動條。這只是說，確保'身體'填補了整個事情。將'max-width'添加到'＃content'將會壓縮一切，並完全否定它所具有的固定寬度。另外，接受的答案基本上是說同樣的事情。 – bearfriend

你希望整個頁面可以像4％一樣左右滾動嗎？這對網絡來說是很糟糕的行爲。（PS - 我在OP接受答案之前發佈了我的第一條評論）。我認爲OP不想要這種行爲，並且他們希望刪除額外的餘量（基於整個「欄不符合頁面寬度」位），但顯然OP *想要*這種可怕的行爲。 – TylerH

CSS水平延伸樂隊

回答

相關問題