Нежелательная вертикальная полоса прокрутки и перекрывающийся текст - PullRequest
2 голосов
/ 17 сентября 2011

Полосы прокрутки исчезают при удалении границы, и я попытался поэкспериментировать с полями и отступами, но безрезультатно.

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;
}

Вопросы:

  1. Вертикальная полоса прокрутки.Как я могу избавиться от него, но все же сделать так, чтобы область просмотра становилась слишком короткой?(размер окна изменяется на меньший / меньший)
  2. Наложение текстаКак я могу предотвратить это, когда область просмотра становится слишком короткой?
  3. Opera.Есть ли способ заставить пустое пространство под нижней границей исчезнуть?(опять же: с более короткими областями просмотра)

Ответы [ 2 ]

2 голосов
/ 17 сентября 2011

Это html { height:100%; border:1.2em }, что вызывает его.Граница кумулятивна с (то есть добавляет) к высоте.Если изменить границу на «none», полоса прокрутки исчезнет.

2 голосов
/ 17 сентября 2011

Для полной высоты см. Этот ответ CSS 100% высота с отступом / полем

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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...