更改Safari和Chrome浏览器的高度时div消失
使用Safari或Chrome浏览器访问此URL: 设置浏览器窗口的宽度,以确保绿色框的高度大于红色框的高度。然后抓住浏览器窗口的下边缘,将其拖动到绿色框的下边缘,并围绕它播放。当浏览器窗口的下边缘高于绿色框的下边缘时,您会注意到红色框消失。然后继续缩小浏览器窗口的高度,红色框将再次出现。您会注意到,当浏览器窗口的下边缘到达红色框的下边缘时,红色框正好再次出现。红色框在其他浏览器(例如,FF和Opera)中永远不会消失。这是Safari中的bug还是某种“功能”?在任何情况下,如果有人建议我一个解决办法,以避免在狩猎中消失的红盒子,我将不胜感激。 以下是上述页面的代码:更改Safari和Chrome浏览器的高度时div消失,safari,html-rendering,Safari,Html Rendering,使用Safari或Chrome浏览器访问此URL: 设置浏览器窗口的宽度,以确保绿色框的高度大于红色框的高度。然后抓住浏览器窗口的下边缘,将其拖动到绿色框的下边缘,并围绕它播放。当浏览器窗口的下边缘高于绿色框的下边缘时,您会注意到红色框消失。然后继续缩小浏览器窗口的高度,红色框将再次出现。您会注意到,当浏览器窗口的下边缘到达红色框的下边缘时,红色框正好再次出现。红色框在其他浏览器(例如,FF和Opera)中永远不会消失。这是Safari中的bug还是某种“功能”?在任何情况下,如果有人建议我一个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Fixed Liquid CSS Layout</title>
<style type='text/css'>
.wrapper
{
width: 100%;
min-width: 300px;
}
.wrapright
{
float: left;
width: 100%;
background-color: Blue;
}
.right
{
margin-left: 160px;
background-color: Lime;
}
.left
{
float: left;
width: 150px;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapright">
<div class="right">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH
EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT.
</div>
</div>
<div class="left">
<div style="background-color: red;">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, ...
</div>
</div>
</div>
</body>
</html>
2列固定液体CSS布局
.包装纸
{
宽度:100%;
最小宽度:300px;
}
.争吵
{
浮动:左;
宽度:100%;
背景颜色:蓝色;
}
正当
{
左边距:160像素;
背景色:石灰;
}
左边
{
浮动:左;
宽度:150px;
左边距:-100%;
}
洛雷姆·伊普苏姆·多洛·希特·阿梅特(LOREM IPSUM Door SIT AMET)是一位杰出的领导者,他是一位伟大的领袖
尤伊斯穆德·廷西德和拉奥里特·多洛尔·马格纳·埃拉帕特。
这是一位伟大的领袖。。。
我不确定这是否适用于您的最终布局,但基于演示布局:似乎100%的负利润率可能会导致问题。如果去掉float和margin声明并在.left div上执行position:absolute,则行为似乎是相同的。只要容器处于相对位置,我认为您将得到相同的最终结果。我找到了解决方案。刚刚添加了float:left;行到.wrapper类。参见上的示例