瀏覽器滾動切斷內容

我創建了一個簡單的示例來說明我遇到的問題。瀏覽器滾動切斷內容

看來，如果我將DIV設置爲特定的像素寬度，那麼調整瀏覽器的大小直到出現水平滾動條，然後滾動到右側，內容就會被切斷。或者至少有一些。

http://www.artworknotavailable.com/examples/cutoff.html

我失去了這兒什麼？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Browser Cutoff Example</title> 
    </head> 

    <body> 

    <div> 
     <div style="background-color:#009900;"> 
     <div style="width:800px;"> 
      <strong>Width: 800px </strong> 

      <br /> 
      Resize your browser Smaller than the width of this box until Horizontal scroll bars appear 
      <br /> 
      Now scroll to the right. 
      <br /> 
      Why is the box getting cut off? 
     </div> 
     </div> 
    </div> 


    </body> 

    </html>

來源

2010-10-08 kenitech

也許您可以更新您的問題並將您的託管代碼（現在返回404）轉換爲CodePen之類的內容？ – Gerald 2018-03-10 00:25:18

你有3個嵌套divs。一個沒有風格。下一個有背景色。而他最深的是800px的寬度。

試試這個，你會看到發生了什麼：

<html xmlns="http://www.w3.org/1999/xhtml"><head> 


<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<title>Browser Cutoff Example</title> 
</head><body> 

<div> 
    <div style="background-color: rgb(0, 153, 0); border: 9px solid blue;"> 
    <div style="width: 800px; border: 1px solid red;"> 
     <strong>Width: 800px </strong> 
     <br> 
     Resize your browser Smaller than the width of this box until Horizontal scroll bars appear 
     <br> 
     Now scroll to the right. 
     <br> 
     Why is the box getting cut off? 
    </div> 
    </div> 
</div> 


</body></html>

來源

2010-10-08 23:10:28

Hi Moin，謝謝你澄清問題。儘管我認爲預期的行爲將會是具有背景的外部DIV將繼續環繞，但該部分有點意義。在外部DIV上放置「寬度：100％」也被證明是無效的。 – kenitech 2010-10-12 15:09:55

這個問題讓我抓狂過，這是真的actutally簡單解決。只需添加屬性min-width並將您的網站寬度設置爲相同的值（800px,960px，..）

來源

2012-09-28 20:56:38 Daniel

瀏覽器滾動切斷內容

回答

相關問題