flotteur gauche hauteur 100% div - écart entre les divs

Majorationflotteur gauche hauteur 100% div - écart entre les divs

<%@ 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%; 
}

Résultat dans IE & & FF
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
Le résultat est même wi les deux IE 6 & 7. Comment puis-je supprimer l'écart entre les divs?

udate
I ont deux divs chacun avec une hauteur de 100%. le div de gauche est un div flottant de largeur fixe. Même après avoir donné une bonne marge-gauche à la droite div, il reste un écart (3px) entre les deux divs. Où comme dans Firefox, il rend correctement.

La raison pour laquelle je l'ai utilisé le mode de bizarrerie est en mesure d'obtenir une hauteur de 100% pour la divs

cet écart peut-il être éliminé? Ou y at-il une meilleure façon de faire deux colonnes 100% hauteur mise en page avec css pur?

Source

2008-11-11 Zuhaib

Essayez d'ajouter plus d'explications sur ce que vous avez essayé et ce qui est arrivé. Il ne semble pas que vous ayez mis trop d'efforts à poser votre question. –

Pourquoi est-ce que cette question de débutant toujours downvotes de première main .... la plupart sont des questions légitimes! – chakrit

Ce n'est pas une question de débutant. La question est assez explicite. Pourquoi y a-t-il un écart entre la div flottante? vous ne comprenez pas html ?? M. Randy Stegbauer vous ne devriez pas regarder ceci si vous ne pourriez pas comprendre le problème du titre et du contenu. Ou vous ne vous souciez pas de lire le problème. – Zuhaib

Comme déjà dit, votre code est plein de hacks. Veuillez supprimer en particulier les définitions inutiles. Si un navigateur ne prend pas en charge les feuilles de style en cascade, il ne prend pas en charge CSS de toute façon. Ceci étant dit, pourquoi ne pas utiliser la position: absolute; pour #right?

Comme dans

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

Source

2008-11-11 13:58:52 phihag

positionnement absolu va certainement résoudre le problème. On dirait que la seule solution pour moi .. Merci – Zuhaib

Retirez le commentaire sur le dessus de la page Le « Mettez IE en mode Quirks » chose

Vous utilisez beaucoup de « hacks ». Par cela je veux dire les sélecteurs CSS qui commencent par * html

Je ne dis pas que c'est la cause du problème, mais ce n'est pas une bonne pratique et est sujette aux erreurs. 1) essayez d'utiliser des commentaires conditionnels pour le navigateur qui a le problème de l'écart au lieu d'utiliser ces hacks 2) essayez de modifier votre question en fournissant des informations sur la version de IE que vous testez (IE 6 ou IE 6 ou encore plus bas).

Source

2008-11-11 13:55:00 postback

J'ai testé en utilisant IE 6 et 7, les résultats sont les mêmes. J'ai utilisé le hack pour obtenir 100% de hauteur pour la div. – Zuhaib

* html n'est pas sujette aux erreurs. Il est parfaitement invalide CSS qui fonctionne dans IE 5-6 et est un moyen fiable de cibler IE6. Maintenant que tout le monde sait qu'il ne cible pas IE7, il n'y a aucun danger à l'utiliser. –

Pour être honnête, si vous remplissez le corps avec ces divs, vous êtes mieux de donner l'un d'eux un fond transparent et définir la couleur d'arrière-plan de la corps à la couleur désirée, masquant le problème.

Surtout si, en essayant de résoudre le problème d'IE, vous introduisez un fléau de hacks CSS dans ce qui devrait être un code agréable et propre compte tenu de la mise en page simple que vous photographiez.

Source

2008-11-13 16:27:58 infoxicated

... plus la page se redimensionnerait mieux. – da5id

Le problème réel est l'espace entre la balise div de fermeture et la prochaine balise div d'ouverture. Si vous les mettez ensemble sur la même ligne sans espace entre eux, ou remplissez l'espace blanc avec un commentaire, les espaces seront partis.

<div id="left"> 
</div><div id="right"> 
</div>

<div id="left"> 
    </div><!-- IE doesn't ignore whitespace between divs 
    --><div id="right"> 
    </div>

Source

2012-08-10 15:41:49

flotteur gauche hauteur 100% div - écart entre les divs

Répondre

Questions connexes