logo标签列表

浏览器滚动条截断内容

cssdombackground
4
我创建了一个简单的示例来说明我遇到的问题。
似乎如果我将一个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>
1
也许您可以更新您的问题并将托管的代码（现在返回404）移动到类似CodePen的地方？ - Gerald
2个回答
3

这个问题也曾让我烦恼不已，其实解决起来非常简单。只需添加属性min-width，并将其值设为与您的网站宽度相同（800px，960px等）即可。

1

你有3个嵌套的div。其中一个没有样式。下一个有背景颜色。最深的一个有800像素的宽度。

试一试，你就会看到发生了什么：

<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>
嗨Moin，感谢您澄清了这个问题。那部分有点有道理，尽管我认为期望的行为应该是具有背景的外部DIV继续包装周围。在外部DIV上放置“width：100％”也被证明是无效的。 - kenitech
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接