nicht angemeldet
Hallo,
der folgende einfache HTML-Code erzeugt eine vertikale Scrollbar.
Aber warum? Platz genug ist vorhanden.
Seltsamerweise lässt sich das verhindern, sobald overflow: auto; im html/Body CSS steht. Was interpretieren die Browser denn falsch bzw. was ist falsch an meiner Auszeichnung?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>Scrollbars</title>
<style>
html, body {
border: 0;margin: 0;padding: 0;
width:100%;height:100%;
font-family: Arial;
background-color: #008080;
}
table{
width:90%;
margin: auto;
min-height:30%;
}
td{
height:100%;
vertical-align: middle;
text-align: center;
font-size: 70px;
font-weight: bold;
}
h1{
text-align: center;
font-size: 100%;
color: #E3F1D0;
}
h3{
text-align: center;
font-size: 4vw;
color:#E3F1D0;
margin:5px auto;
}
</style>
</head>
<body>
<h1>start page</h1>
<h3>info bla bla bla</h3>
<table>
<tr>
<td>xxx</td><td>xxx;</td><td>###</td>
<td>xxx</td><td>###</td><td>###</td>
</tr>
</table>
<h3>End of page</h3>
</body>
</html>
wie gesagt, so geht's, die Leiste verschwindet bis sie wirklich gebraucht wird:
html, body {
border: 0;margin: 0;padding: 0;
width:100%;height:100%;
font-family: Arial;
background-color: #008080;
Overflow:auto;
}
*Getestet mit IE11 und Chrome
Gruss Henry
TS
Gunnar Bittersmann
Tabellenkalk
Matthias Apsel
marctrix
Camping_RIDER