gpt4 book ai didi

html - 向左浮动 100% 高度 div - div 之间的间隙

转载 作者:太空狗 更新时间:2023-10-29 14:50:22 25 4
gpt4 key购买 nike

标记

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Zuhaib.test" %>
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="css/general.css" rel="stylesheet" type="text/css" />
<link href="css/outbound.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server" class="wrapper">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="left">
</div>
<div id="right">
</div>
</form>
</body>
</html>

CSS

html, body
{
margin:0;
padding:0;
border:0;
overflow:hidden;
width:100%;
height:100%;
}
* html body
{
height:100%;
width:100%;
}
*{
margin:0;
padding:0;
}
.wrapper
{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
height:100%;
width:100%;
}
* html .wrapper
{
width:100%;
height:100%;
}
#left{
float:left;
height:100%;
width:100px;
overflow:hidden;
background-color:Blue;
}
* html #left{
height:100%;
width:100px;
}
#right{
margin-left:100px;
height:100%;
background-color:Red;
}
* html #right{
height:100%;
}

在 IE && FF 中的结果
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
结果与 IE 6 和 7 相同。如何消除 div 之间的间隙?

更新
我有两个 100% 高度的 div。左边的 div 是一个固定宽度的 float div。即使在为右侧的 div 提供了正确的 margin-left 之后,两个 div 之间仍然存在间隙(3px)。在 Firefox 中它可以正确呈现。

我使用 quirk 模式的原因是能够为 div 获得 100% 的高度

这个差距可以消除吗?或者有没有更好的方法来使用纯 css 进行两列 100% 高度布局?

最佳答案

如前所述,您的代码充满了黑客攻击。请特别删除不必要的定义。如果浏览器不支持 级联 样式表,它无论如何也不会支持 CSS。

话虽如此,为什么不使用 position: absolute; #right?

如在

#right{
position: absolute;
left: 100px;
padding-left: -100px;
width: 100%;
...
}

关于html - 向左浮动 100% 高度 div - div 之间的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/280846/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com