在下面的代碼段中，頁腳占據了頁面可見部分的整個寬度，但是一旦發生滾動，很明顯頁腳比整個頁面短，因為滾動。
如何表達“使元素與整個頁面一樣寬，包括由于滾動而看不到的區域”的意圖？
<style type="text/css" media="screen">
* {
margin: 0;
}
footer {
width: 100%;
border: 1px solid black;
}
</style>
<main>
mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain
</main>
<footer>
footer content
</footer>令我困惑的是，據我從開發工具中得知，整個html元素與最初可見的區域一樣寬；如果我向右滑動一點，然后將滑鼠懸停<html>在Chrome 開發工具的元素選項卡中的元素上，我會看到藍色覆寫層僅覆寫視圖的原始部分，而在此之后該部分不可見滾動：
uj5u.com熱心網友回復：
問題不在于頁腳沒有擴展整個寬度：而是您擁有的文本元素比其容器寬。
頁腳的寬度 % 由其父元素定義（在這種情況下是主 HTML 元素，它從螢屏獲取寬度）。另一方面，文本沒有被包含并且可以說是“越界”。如果您隱藏文本父元素上的溢位，問題就解決了。
不使用 breakword 的一個原因是我假設您的實際用例不是一行沒有中斷的文本，更有可能是超出檔案寬度的影像或其他元素。
<style type="text/css" media="screen">
main {
overflow-x: hidden; //hide the page overflow
}
* {
margin: 0;
}
footer {
width: 100%;
border: 1px solid black;
}
</style>
<main>
mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain
</main>
<footer>
footer content
</footer>uj5u.com熱心網友回復：
問題是“mainmain...”被認為是一個詞，因為它沒有間隔。添加即可word-wrap: break-word;解決問題。
main {
word-wrap: break-word;
}
footer {
width: 100%;
border: 1px solid black;
}<main>
mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain
</main>
<footer>
footer content
</footer>uj5u.com熱心網友回復：
轉到您的 css 代碼并執行。
/* Changing a little bit of CSS code */
main {
/* Setting The Word Warp To Break Word. */
word-wrap: break-word;
}
干杯……本。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/375221.html
上一篇：`getBoundingClientRect`可以在`rem`中回傳值嗎？
下一篇：擴展html表單元素