div Float links 100% Höhe - Lücke zwischen divs

Mark Updiv Float links 100% Höhe - Lücke zwischen 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%; 
}

Ergebnis in IE & & FF
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
Das Ergebnis ist gleiches wi th beide IE 6 & 7. Wie kann ich die Lücke zwischen den divs entfernen?

Udate
Ich habe zwei divs mit je 100% der Höhe. Das linke Div ist ein Floating Div mit fester Breite. Selbst nachdem man dem rechten div den richtigen Rand gegeben hat, bleibt eine Lücke (3px) zwischen den beiden divs. Wo wie in Firefox es richtig darstellt.

Der Grund, warum ich Quirks-Modus verwendet haben, ist in der Lage für die divs 100% Höhe zu bekommen

Kann diese Lücke beseitigt werden? Oder gibt es einen besseren Weg, zwei Spalten 100% Höhe Layout mit reinem CSS zu tun?

Quelle

2008-11-11 Zuhaib

versuchen, mehr Erklärung über das Hinzufügen, was Sie versucht haben, und was passiert ist. Es scheint nicht so, als ob du dich zu sehr darum bemühst, deine Frage zu stellen. –

Warum wird Newbie-Frage immer aus erster Hand abgelehnt? Die meisten sind legitime Fragen! – chakrit

Dies ist keine neue Frage. Die Frage ist ziemlich selbsterklärend. Warum gibt es eine Lücke zwischen dem schwebenden div? Verstehst du nicht HTML? Herr Randy Stegbauer sollte dies nicht sehen, wenn Sie das Problem nicht aus Titel und Inhalt verstehen konnten. Oder es ist dir egal, das Problem zu lesen. – Zuhaib

Wie bereits erwähnt, ist Ihr Code voller Hacks. Bitte entfernen Sie insbesondere die unnötigen Definitionen. Wenn ein Browser Cascading Stylesheets nicht unterstützt, wird CSS sowieso nicht unterstützt.

Dass gesagt wird, warum nicht Position verwenden: absolute; für # richtig?

Wie in

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

Quelle

2008-11-11 13:58:52 phihag

absolute Positionierung wird definitiv das Problem lösen. Sieht aus wie die einzige Lösung für mich .. Danke – Zuhaib

Entfernen Sie den Kommentar auf der Seite Das „IE in Macken Put-Modus“ Ding

Du viele ‚Hacks‘ verwenden. Damit meine ich die CSS-Selektoren, die mit * html beginnen

Ich sage nicht, dass das die Ursache des Problems ist, aber es ist keine gute Praxis und ist fehleranfällig.

1) Versuchen Sie bedingte Kommentare für den Browser zu verwenden, der das Lückenproblem hat anstatt diese Hacks zu verwenden. 2) Versuchen Sie, Ihre Frage zu bearbeiten, indem Sie Informationen über die Version von IE, gegen die Sie testen, geben (meine Schätzung ist IE 6 oder sogar niedriger).

Quelle

2008-11-11 13:55:00 postback

Ich habe mit IE 6 & 7 getestet, Ergebnisse sind gleich. Ich habe die Hacks benutzt, um 100% Höhe für das Div zu bekommen. – Zuhaib

* HTML ist nicht fehleranfällig. Es ist absolut ungültig CSS, das zufällig in IE 5-6 funktioniert und ist eine zuverlässige Möglichkeit, IE6 zu zielen. Jetzt, da jeder weiß, dass es nicht auf IE7 abzielt, besteht keine Gefahr, dies zu verwenden. –

Um ehrlich zu sein, wenn man den ganzen Körper nach oben mit diesen divs ist füllen, dann sind Sie besser dran, einer von ihnen einen transparenten Hintergrund zu geben und die Hintergrundfarbe der Einstellung Körper auf die gewünschte Farbe, maskieren das Problem.

Vor allem, wenn Sie versuchen, das IE-Problem zu lösen, führen Sie eine Plage von CSS-Hacks in das ein, was schöner und sauberer Code sein sollte, in Anbetracht des einfachen Layouts, für das Sie schießen.

Quelle

2008-11-13 16:27:58 infoxicated

... plus die Seite würde die Größe besser ändern. – da5id

Das eigentliche Problem ist das Leerzeichen zwischen dem Schließen div-Tag und dem Tag nächsten Öffnung div. Wenn Sie sie in der gleichen Zeile ohne Leerzeichen zwischen ihnen platzieren oder den Leerraum mit einem Kommentar ausfüllen, ist das Leerzeichen nicht mehr vorhanden.

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

oder

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

Quelle

2012-08-10 15:41:49

div Float links 100% Höhe - Lücke zwischen divs

Antwort

Verwandte Themen