屏幕太小时防止帧滚动答案

【问题标题】：Prevent frame scrolling when screen is too small屏幕太小时防止帧滚动
【发布时间】：2012-02-06 20:56:52
【问题描述】：

我正在使用框架。我的徽标框架包含 2 张图片。一种是 150 像素，另一种是 600 像素，使整个徽标大小为 750 像素。现在，当用户使窗口小于整数时，我的第二张图片正在向下滚动而无法看到图片。

最简单的方法是将 2 张图片连接成一张 750 像素的图片，但有没有办法避免这种情况？

我的徽标框架上的所有代码都是......

<body class="logo_background">
    <img src="assets/logo.png">
    <img src="assets/logo_name.png">
</body>

我的 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
</head>
<frameset rows="80px,100%" cols="*" framespacing="0" frameborder="no" border="0">
  <frame src="logo.html" name="logo" scrolling="no">
  <frameset rows="*" cols="150,100%">
    <frame src="menu.html" name="menu" scrolling="no">
    <frame src="main_page.html" name="page" scrolling="no">
  </frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>

【问题讨论】：

向下滚动??.. 图像（或其容器）正在滚动？?.. 还是窗口？?..
@Vivek Chandra，框架，第二张图片被移动到第一张的底部（向下滚动），无法查看。
为什么要使用相框？它们在技术上已被弃用...您可以发布一个 jsfiddle 示例吗？我不太明白你的问题。
2 张图片...一张 150px，其他 600px...如果屏幕低于 2 的总和，我的其他图片将向下移动，并且在我的框架中不可见...

标签： html css frame

【解决方案1】：

在图像容器上使用最小宽度为 750 像素。它会解决问题.. 我同意 @elclanrs .. 使用 div 来实现这一点.. 帧可能不是最好的方法..

.logo_background{
min-width:760px;/* just to be sure adding an extra 10px */
}

现在，无论窗口大小如何，容器都将具有 760 像素，因此您的图片不会丢失其位置 - 不要离开视野，您仍然可以向右滚动以查看徽标 - 两者.. :)

这里有一个解决你问题的方法——http://jsfiddle.net/mvivekc/h4gVe/

【讨论】：

style="min-width: 750px" 在标志正文中或在 div 中出现 2 张图片后不会使我的图片保持在一起。
大声笑.. 它只是一个工具，您可以在那里复制您的问题，以便其他人可以使用您的代码并为您提供更好/更快的解决方案.. 考虑使用它.. :)
我在使用记事本、firefox 和 F5 :D

【解决方案2】：

只需将徽标框架的样式设置为不小于 750 像素的宽度。我认为这会奏效。

【讨论】：

嗯，这可能是。我的徽标框架设置为 100%，所以如果我将其更改为更高的宽度，它可能不会这样做（没问题，因为我隐藏了滚动条）。我会试试这个。
保持宽度为 100% 并添加 750px 的最小宽度