Unwanted vertical scrollbar and overlapping text_问答_开发者

Unwanted vertical scrollbar and overlapping text

开发者 https://www.devze.com 2023-04-05 08:29 出处：网络

Scrollbars disappear when border is removed, and I\'ve tried experimenting with margins and padding, but to no avail.

相关专题：css

Scrollbars disappear when border is removed, and I've tried experimenting with margins and padding, but to no avail.

JSFiddle (In FF, Opera and Chrome, h1's background isn't white, but it is in JSFiddle, in all three.)

(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&开发者_StackOverflow社区gt;
    <!--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;
}

Questions:

Vertical scrollbar. How can I get rid of it, but still have one appear when viewport gets too short? (window is resized to be smaller/less tall)
Overlapping text. How can I prevent it from happening when viewport gets too short?
Opera. Is there a way to make the empty space underneath the bottom border disappear? (again: with shorter viewports)

For the full height see this answer 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/

It is the html { height:100%; border:1.2em } that is causing it. The border is cumulative with (i.e. adds to) the height. If you change the border to "none" then the scrollbar disappears.