Flotador a la izquierda 100% altura div - espacio entre divisiones
https://stackoverflow.com/questions/280846
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Marcar
<%@ 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%;
}
Resultado en IE & amp; & amp; FF
Resutls en IE & amp; FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
El resultado es el mismo con IE 6 & amp; 7. ¿Cómo puedo eliminar el espacio entre los divs?
Udate
Tengo dos divs cada uno con 100% de altura. el div izquierdo es un div flotante de ancho fijo. Incluso después de dar el margen correcto a la izquierda al div derecho, queda un espacio (3px) entre los dos divs. Donde, como en Firefox, se representa correctamente.
La razón por la que he usado el modo peculiar es para poder obtener el 100% de altura para los divs
¿Se puede eliminar esta brecha? ¿O hay una mejor manera de hacer dos columnas de 100% de diseño de altura con CSS puro?
Solución
Como ya se dijo, su código está lleno de hacks. Por favor, elimine especialmente las definiciones innecesarias. Si un navegador no admite hojas de estilo en cascada , no admitirá CSS de todos modos.
Dicho esto, ¿por qué no usar position: absolute; para #derecho?
Como en
#right{
position: absolute;
left: 100px;
padding-left: -100px;
width: 100%;
...
}
Otros consejos
Eliminar el comentario en la parte superior de la página El " Ponga IE en modo peculiaridades " cosa
Estás usando muchos 'hacks'. Con eso me refiero a los selectores CSS que comienzan con * html
No digo que esa sea la causa del problema, pero no es una buena práctica y es propenso a errores.
1) intente usar comentarios condicionales para el navegador que tiene el problema de brecha en lugar de usar esos hacks 2) intente editar su pregunta proporcionando información sobre la versión de IE con la que está probando (supongo que es IE 6 o incluso inferior).
Para ser honesto, si está llenando todo el cuerpo con estos divs, es mejor que le dé a uno de ellos un fondo transparente y establezca el color de fondo del cuerpo al color deseado, enmascarando el problema.
Especialmente si, al tratar de resolver el problema de IE, estás introduciendo una plaga de hacks CSS en lo que debería ser un código limpio y agradable teniendo en cuenta el diseño simple que estás buscando.
El problema real es el espacio en blanco entre la etiqueta div de cierre y la siguiente etiqueta div de apertura. Si los junta en la misma línea sin espacio entre ellos, o completa el espacio en blanco con un comentario, el espacio en blanco desaparecerá.
<div id="left">
</div><div id="right">
</div>
o
<div id="left">
</div><!-- IE doesn't ignore whitespace between divs
--><div id="right">
</div>
