开发者

Unwanted vertical scrollbar and overlapping text

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:

  1. 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)
  2. Overlapping text. How can I prevent it from happening when viewport gets too short?
  3. 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.

  • CSS Box Model
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜