浏览器滚动切断内容

问题描述：

我创建了一个简单的示例来说明我遇到的问题。浏览器滚动切断内容

看来，如果我将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>

也许您可以更新您的问题并将您的托管代码（现在返回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>

Hi Moin，谢谢你澄清问题。尽管我认为预期的行为将会是具有背景的外部DIV将继续环绕，但该部分有点意义。在外部DIV上放置“宽度：100％”也被证明是无效的。 – kenitech 2010-10-12 15:09:55

答

这个问题让我抓狂过，这是真的actutally简单解决。只需添加属性min-width并将您的网站宽度设置为相同的值（800px,960px，..）

浏览器滚动切断内容

相关推荐