浮动和扩展问题答案

【问题标题】：Float and expand problems浮动和扩展问题
【发布时间】：2012-10-23 12:38:18
【问题描述】：

我不是一个经验丰富的 html 编码器，所有这些都是在没有任何专业帮助的情况下完成的，所以结果看起来很古怪。网站：www.cakery.co.il/beta 我有浮动和展开问题（如 Dreamweaver 所述） - 当我进入我的站点并尝试调整窗口大小时，顶部（蓝色）功能区和底部功能区被切断，看起来很奇怪。

我该如何解决这个问题？

例如，这是 css 中的顶部功能区代码：

#blue_decoration {
    height: 85px;
    background-image: url(_images/top_stripe.png);
}

感谢您的帮助。

谢谢

【问题讨论】：

我看不出发生了什么问题。你用的是什么浏览器？
行为正常..
如果您“还原”窗口并垂直滚动，您将看到被切断的色带。我用的是IE9。使用您的 iPhone 查看此页面，您会看得更清楚。
这是我看到的：tinypic.com/r/29mozle/6 和这个tinypic.com/r/suu8af/6
被切断的部分在屏幕的左侧。

标签： html css expand

【解决方案1】：

如果不了解其他情况，很难确切地看出问题所在，但我仍然可以提供一些指示。

如果您愿意，我会 PM 链接，但您可以轻松复制粘贴以下内容自己查看：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />        
<title></title>
    <style>
    #blue_decoration {
        height: 85px;
        background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png');
    }
    #bottom_blue_decoration {
        height: 30%;
        background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png');
    }

</style>
</head>
<body>
<header id="blue_decoration"> Hello World</header><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<footer id="bottom_blue_decoration"> don't collapse me! </footer>
</body>
</html>

您可能会注意到它在屏幕上重复出现，没有很多问题。但是，没有与样式相关的职位；相反，它取决于内容不崩溃。可以说，指定顶部和底部定位可能会更好。另一件事是您可能正在重用 id - 严格来说，应该在给定页面上只使用一次。这很容易解决 - 只需将该样式指定为一个类（使用点而不是哈希）并使用关键字 class 而不是 id 来调用它。

尝试使用背景大小的非绝对值，而是使用响应百分比。一个重要的问题是：您是否希望任何内容涵盖此背景？如果您希望它是没有任何内容的图像，您最终最好使用<img> 标签...

【讨论】：

这看起来不错，因为它不会崩溃。等我回家再试一试，告诉你！谢谢！
我遇到了困难。我尝试更改值，无法解决问题。如果您查看代码，您可以提供帮助吗？您可以在此处查看该站点：www.cakery.co.il/b3（css 文件称为styles.css）
我没有在你的网站上看到任何明显的错误（不过只有一两个不相关的指针；可能应该在文件底部有 javascript，并且还具有图像导航的标题属性纽扣）。您看到的不正确的地方是什么？
等等，我明白你在 IE 中的意思（它总是 IE，不是吗？） - 我建议使用 IE 特定样式表来触发 [if ie] 语句，该语句将添加额外的边距。
看看我上面贴的两张图片。如果您调整浏览器窗口的大小，您可以看到顶部的蓝色标题和下面的两个功能区都被切断（这发生在所有浏览器上，而不仅仅是 IE）。有解决办法吗？