Question

当删除边框时，Scrollbars会消失，我尝试使用边距和填充，但无济于事。

JSFiddle（在FF，Opera和Chrome中，h1的背景不是白色，但它在中都是在JSFiddle中，在所有三个中。）

（X）HTML 5：

<!DOCTYPE html>
<html>
<head>
<title>This is just a title for kicks</title>
<link rel="stylesheet" type="text/css" href="styles/whoopie.css"
media="all" />
<meta charset="UTF-8">
</head>
<body>
    <!--Content starts here. Nonsensical comment ends in 3...2...-->
    <h1 class ="header" dir="ltr">Here... be... <a href="images">Images!</a></h1>

    <p class="middle" dir="ltr" lang="en-GB"
            title="Explanatory title">
                    Tidbit of info</p>
    <p class="btw" dir="ltr" lang="en-GB" title="Funny title?">
            No, no joke here "/
    <br>
    <br>More text
    <br>
    <br>Even more text
    <br>And yes, these are meant to be on seperate lines.
    <br>
    <br>This is the final line</p>
</body>
</html>

CSS3：

html {
    margin: 0;
    height: 100%;
    color: black;
    background-color: #ddd;
    border: 1.2em inset #000;
    font-family: Georgia, sans-serif;
}

h1 {
    font-size: 6.25em;
    margin: 0;
}

.middle {
    position: absolute;
    bottom: 50%;
}

.btw {
    position: absolute;
    bottom: 0;
}

问题：

垂直滚动条。我怎样才能摆脱它，但是当视口太短时仍会出现一个？（窗口调整为更小/更小）
重叠文字。当视口太短时，如何防止它发生？
戏。有没有办法让底部边框下面的空白区域消失？（再次：视口较短）

Answer 1

对于全高，请参阅此答案 CSS 100% height with padding/margin

html {
    margin: 0;
    height: 100%;
    color: black;
    background-color: #ddd;
    border: 1.2em inset #000;
    font-family: Georgia, sans-serif;

/* Note these below*/
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

http://jsfiddle.net/RWHAQ/1/

Answer 2

造成它的是html { height:100%; border:1.2em }。边界与高度累积（即增加）。如果将边框更改为“无”，则滚动条将消失。

CSS Box Model

不需要的垂直滚动条和重叠文本

2 个答案: