Entfernen Leerzeichen an der Unterseite von HTML/Körperhöhe: 100% Layout

Ich versuche, eine Seite in zwei gleiche Bereiche zu teilen, wobei jeder 100% der Seitenhöhe und 50% der Seitenbreite.Entfernen Leerzeichen an der Unterseite von HTML/Körperhöhe: 100% Layout

Dies führt jedoch zu einem störenden Leerzeichen am unteren Seitenrand, was auch dann zu einer lästigen Bildlaufleiste auf der ganzen Seite führt.

Normalerweise würde ich den DOM-Inspektor meines Browsers verwenden, um zu finden, was unerwünschten Speicherplatz verursacht, aber es ist hier nutzlos, da das Leerzeichen außerhalb des HTML-Tags (?!) Zu sein scheint.

Die HTML ist wie folgt (alles außerhalb des Körpers der Übersichtlichkeit halber weggelassen)

<body><div id="box1"></div><div id="box2"></div></body>

Die CSS ist wie folgt:

* { box-sizing: border-box; border: 1px solid red; } 

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

div { 
    display: inline-block; 
} 

#box1 { 
    height: 100%; 
    width: 50%; 
    background-color: blue; 
} 

#box2 { 
    height: 100%; 
    width: 50%; 
    background-color: green; 
}

Ich habe auch eine JSFiddle geschaffen, die verwaltet um das Problem zu replizieren.

Ich kam in this question, die ähnlich scheint, aber keine der Antworten dort erklären, warum dies auftritt (this answer eine Erklärung für nicht bieten, wenn img-Tags vorhanden sind) und alle Updates scheinen, wie Hacks oder Abhilfen.

Bearbeiten: Als Reaktion auf den Kommentar (der scheint verschwunden zu sein), ist das Problem in der Fiddle in Firefox 49.02 und Edge 38.14393.0.0 auf Windows 10 repliziert. Es tritt auch in Chrome 54.0.2840.71, aber es ist weniger auffällig (und die Bildlaufleiste scheint sich nicht zu bewegen, wenn ich das Fenster maximiert habe).

Quelle

2016-11-12 studro

Also jetzt wollen Sie wissen oder wollen den Grund? Bdw Sie können Überlauf verwenden: ausgeblendet, um diese Bildlaufleiste zu entfernen. Overflow: hidden wird zusätzlichen Speicherplatz entfernen, der die Bildlaufleiste verursacht. –

@Leothelion - ja - was verursacht den Whitespace? – studro

Es ist der CSS-Block 'div {display: inline-block;}' - lesen Sie in was Inline-Block bedeutet. Hier ist eine aktualisierte Fiddle ohne Leerzeichen - https://jsfiddle.net/ez4wm20c/ – Steve

Ich bin sicher, dass einige Leute dazu hinzufügen, werden aber hier ist mein Verständnis ...

Sie haben div {display: inline-block;}. Inline-Blöcke sind wie ein Block, werden aber als Text behandelt, daher ist die Zeilenhöhe wichtig. Wenn Sie die erste Zeile Ihres CSS aktualisieren, um ...

* { box-sizing: border-box; border: 1px solid red; line-height: 0;}

... wird das Leerzeichen weggehen. Spielen Sie mit der Zeilenhöhe in Ihrer Fiedel herum, um die Menge an Leerraum zu ändern, die Sie haben. Werte ab 14px fingen an, Leerzeichen für mich hinzuzufügen.

Quelle

2016-11-12 12:05:06 Steve

Ja, das scheint es zu sein. Ich denke ein [Flex-Layout] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) beseitigt die Notwendigkeit für all diese Hacks. Ich habe die Geige [hier] (https://jsfiddle.net/m4a6d4gh/) aktualisiert, um dieses Design mit einem Flex-Layout zu demonstrieren. – studro

Ah schön, 'flex' ist ein neues für mich, aber scheint Ihren Bedürfnissen zu entsprechen. Ich bin jetzt hauptsächlich ein PHP-Entwickler, aber deine Frage ist mir aufgefallen! Viel Spaß und danke für die Annahme meiner Antwort! – Steve

Fügen Sie einfach overflow:hidden in body-Tag css.

* { box-sizing: border-box; border: 1px solid red; } 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    overflow:hidden; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
} 
 

 
#box1 { 
 
    height: 100%; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 

 
#box2 { 
 
    height: 100%; 
 
    width: 50%; 
 
    background-color: green; 
 
}

<body><div id="box1"></div><div id="box2"></div></body>

Quelle

2016-11-12 11:32:01

Dies wird auch _wanted_ Bildlaufleisten entfernen. – Marvin

@sachin Ich erwähne bereits in dieser Sache in meinem Kommentar und frage, was Sie als op wissen müssen, lösen aber fragen den Grund. Bitte lesen Sie zuerst die Frage und dann versuchen Sie es als Antwort zu posten, damit die SO-Seite frei von Spam ist. Danke –

In diesem Fall. Sie müssen scrollbar ::: webkit-scrollbar { display: none; } und verwenden Sie den Überlauf: auto; –

Entfernen Leerzeichen an der Unterseite von HTML/Körperhöhe: 100% Layout

Antwort

Verwandte Themen