100% Höhe und Polsterung = Überlauf

Ich habe ein Setup, das wie folgt aussieht:100% Höhe und Polsterung = Überlauf

<html><head><style> 
table{ 
    height:100%; 
    width:100%; 
    padding:0 20px 20px 20px; 
    min-height:540px; 
    min-width:720px; 
} 
tr.head{ 
    height:35px; 
    background:black; 
} 
td.left-bar{ 
    background-color:green; 
    width:220px; 
} 
td.spacer{ 
    width:10px; 
} 
td.right-bar{ 
    background-color:blue; 
} 
div.sb-top{ 
    height:20px; 
    background-color:red; 
} 
div.sb-bottom{ 
    height:100%; 
    background-color:yellow; 
    padding:10px; 
} 
</style></head><body> 
<table> 
    <tr class="head"><td colspan='3'></tr> 
    <tr> 
     <td class="left-bar"><div class="sb-top"></div><div class="sb-bottom"></div></td> 
     <td class="spacer"></td><td class="right-bar"></td> 
    </tr> 
</table> 
</body></html>

Allerdings, wenn ich tun, um diese sowohl die Höhe und Polsterung auf sb_bottom weil es die Zelle zu überfluten Vergangenheit. Ich bin nicht so besorgt um den rechten/linken Überlauf, aber ich muss unbedingt den unteren Überlauf beheben. Wie kann ich das machen? Vielen Dank!

Quelle

2009-07-28 Anonymous

Überlauf könnte nicht das richtige Wort gewesen sein. das macht den unerwünschten teil des sb-bottom div unsichtbar, aber es ist immer noch da und jeder darin enthaltene inhalt wird auch unsichtbar was nicht das ist was ich will –

loswerden Ihre Höhe und Breite 100% Anforderungen ... es wird sich selbst verbreiten. Außerdem können Ihre Min-Höhen und Breiten hier Faktoren spielen ... Sie können diese auch loswerden

Quelle

2009-07-28 22:56:35 Jason

Tabellen wachsen automatisch mit Inhalten, sicher, aber was ist, wenn es nicht so viel gibt Inhalt drin? Sie können nicht nur die Anweisungen für Höhe oder Mindesthöhe entfernen. – nickf

das ist ein Design-Problem dann ... – Jason

Wie wäre es, die Polsterung auf den Körper anstatt auf den Tisch zu verschieben?

Wenn das nicht funktioniert, können Sie die Tabelle in ein Div einfügen und dem Div die entsprechenden Ränder statt einer Auffüllung geben.

Quelle

2009-07-28 23:29:46 jeroen

Sie könnten immer eine innere Wrap innerhalb von sb_bottom und geben Sie das Padding. Auf diese Weise wird es nicht überlaufen.

Quelle

2009-07-28 23:35:31 Ballsacian1

Dies ist wahrscheinlich nur ein Hack, aber ich habe Padding-Boden auf der linken Seite hinzugefügt und es sieht gut aus.

td.left-bar{ 
    background-color:green; 
    width:220px; 
    padding-bottom:40px; 
}

lud ich den sb-bottom div mit Text und es gescrollt den Bildschirm aus, aber ich war nicht sicher, ob Sie die Höhe zu befestigen oder sein scrollbaren wollten.

Quelle

2009-07-29 00:12:36 Mottie

Sie benötigen nur box-sizing: border-box; unter div.sb-bottom.

Dies würde sicherstellen, Höhe: 100% enthält die Polsterung auch in der übergeordneten Inhaltshöhe. Andernfalls wird die tatsächliche Höhe oder das div die Höhe des übergeordneten + padding sein, die immer über die Höhe des übergeordneten Inhalts hinausgeht.

Quelle

2014-07-09 01:31:06

100% Höhe und Polsterung = Überlauf

Antwort

Verwandte Themen