Überschreitung der vertikalen Höhe von 100% mit umrandeter Tabelle

Im Vollbildmodus erzeugt dieser Code eine vertikale Bildlaufleiste. Warum tritt dies auf, wenn die Höhe der Tabelle auf 100% festgelegt ist? Ich habe versucht, die box-sizing Eigenschaft zu border-box zu ändern, um die 1px Randbreite innerhalb der 100% Höhe der Tabelle einzuschließen. Ist die Tischhöhe zu etwas wie 99.999% wirklich die beste Lösung oder overflow:hidden? Gibt es eine bessere Lösung, um diese vertikale Bildlaufleiste los zu werden? Es scheint die Höhe von nur 1px alles über 100% zu schieben.Überschreitung der vertikalen Höhe von 100% mit umrandeter Tabelle

Ich möchte diese vertikalen Bildlaufleiste

@import url('https://necolas.github.io/normalize.css/latest/normalize.css'); 
 
html, body{height:100%} 
 
table{border-collapse:collapse; width:100%; height:100%} 
 
td, th{border:1px solid #222; padding:10px} 
 
td div{ 
 
    display:inline-block; background-color:#222; color:#eee; padding:5px; 
 
    margin:0 2.5% 
 
}

<!doctype html> 
 
<html lang="en-US"> 
 
    <body> 
 
    <table> 
 
     <tr><th rowspan="4">UI</th> <td><div>box-sizing</div></td></tr> 
 
     <tr><td><div>resize</div></td></tr> 
 
     <tr><div><td><div>cursor</div></td></div></tr> 
 
     <tr><td><div>content</div></td></tr> 
 
     <tr> 
 
     <th rowspan="6">BASIC BOX</th> 
 
     <td><div>display</div> <div>visibility</div></td> 
 
     </tr> 
 
     <tr><td><div>overflow</div></td></tr> 
 
     <tr><td><div>clip</div></td></tr> 
 
     <tr><td><div>width</div> <div>height</div></td></tr> 
 
     <tr><td><div>margin</div> <div>padding</div></td></tr> 
 
     <tr><td><div>float</div> <div>clear</div></td></tr> 
 
     <tr> 
 
     <th rowspan="6">BEAUTIFICATION</th> 
 
     <td><div>...</div> <div>...</div></td> 
 
     </tr> 
 
     <tr><td><div>...</div></td></tr> 
 
     <tr><td><div>...</div></td></tr> 
 
     <tr><td><div>...</div> <div>...</div></td></tr> 
 
     <tr><td><div>...</div> <div>...</div></td></tr> 
 
     <tr><td><div>...</div> <div>...</div></td></tr> 
 
    </table> 
 
    </body> 
 
</html>

Quelle

2017-01-24 Anonymous

Hmm - Ich habe es in einen Codepen (http://codepen.io/anon/pen/bgrpEP) eingefügt, und es gibt KEINE Bildlaufleiste. Vielleicht eine Browser-Sache, die "normalize.css" nicht "neutralisiert"? – Johannes

@Johannes Sie haben keine vertikale Bildlaufleiste wie diese? http://imgur.com/a/VhXsW. Es scheint vorbei zu sein nur 1px im Vollbildmodus verursacht eine Bildlaufleiste –

Nein, ich nicht. Sehen Sie sich meinen Link an - ich habe das Fensterlayout so geändert, dass die Code-Felder nach rechts zeigen und das Ergebnis in einem Portrait-Modus-Panel ist - keine Bildlaufleiste. – Johannes

Scheint loszuwerden, wie ich eine Lösung gefunden:

Ich vermuten, dass das Problem durch border-collapse verursacht wurde - Wenn Sie es entfernen, gibt es keine Bildlaufleiste (auch nicht in Chrome)

Also habe ich eigentlich gleich border: 1px solid #222; zu table hinzugefügt, die Sie td, th zugewiesen hatten. Sie kollabieren trotzdem, aber die Bildlaufleiste verschwand auf diese Weise.

Hier ist der codepen: http://codepen.io/anon/pen/dNzONe

(ändern Ansicht, welche die Code-Panels auf der rechten Seite statt auf der Oberseite zu haben)

Hinweis: Ich habe eigentlich keine Grenze an der Spitze sehen, aber ich habe auch keine in deiner Version gesehen ...

Quelle

2017-01-24 20:28:58 Johannes

Was hat dich dazu gebracht, ** die Grenze ** hinzuzufügen? Das scheint so kontraintuitiv zu sein und ich danke Ihnen, dass Sie das für mich so gelöst haben, dass es kein scheinbar unnötiger Hack war. –

Hmm, es war * eine Art Intuition ... ;-) Ich dachte, es würde mit dem Grenzkollaps zu tun haben: An allen inneren Zellgrenzen gibt es zwei Grenzen, die zu einer zusammengefügt sind. Nur auf der äußeren Seite gibt es nur jeweils einen Rand, also machen Sie auch zwei, indem Sie dem Tisch einen Rahmen hinzufügen.Auf diese Weise werden zwei Grenzen zu einem * überall * zusammengeführt, was der Browser vielleicht besser handhaben könnte. Ich weiß, das klingt sehr seltsam, aber du hast gefragt ... – Johannes

Überschreitung der vertikalen Höhe von 100% mit umrandeter Tabelle

Antwort

Verwandte Themen