CSS: Почему я получаю вертикальную полосу прокрутки с этим простым HTML? (100% высоты) - PullRequest
Новая
       0

CSS: Почему я получаю вертикальную полосу прокрутки с этим простым HTML? (100% высоты)

5 голосов
/ 23 марта 2010

В Firefox 3.5.8 в Windows при использовании этого HTML-кода появляется вертикальная полоса прокрутки: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Haloooo1 - T3</title>
<style type="text/css">
  html, body, div {height: 100%; margin: 0; padding: 0; }
  #main {
    width: 320px;
    background:#7C7497;
    height : 100%;
    margin: 0 auto;
  }
</style>
</head>
<body>
<div id='main'>
<p>Hello</p>
</div>
</body>
</html>

alt text

Q1. Кто-нибудь может объяснить, почему?
Кто-нибудь может объяснить, как его убрать?

Q2. Может кто-нибудь объяснить, почему над дивом есть подушка пустого пространства?Может кто-нибудь объяснить, как это удалить?

Ответы [ 4 ]

7 голосов
/ 23 марта 2010

Добавить это: 

p {margin: 0; }

Ваш элемент p имеет некоторый запас сверху.

Позвольте мне порекомендовать использовать файл сброса CSS. Мне нравится YUI one.

3 голосов
/ 23 марта 2010

Согласно Firebug это margin в <p>. По крайней мере, в 3.6 установка margin-top на p решает проблему. 

p {
    margin-top: 0;
}
2 голосов
/ 23 марта 2010

Это абзац.

Если вы добавите 

 p { margin: 0px; padding: 0px }

все поправляется, включая полосу прокрутки.

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

0 голосов
/ 23 марта 2010

A1.Вы получаете полосу прокрутки, потому что div имеет размер 100% окна браузера, а не 100%.Поскольку div имеет тот же размер, что и окно браузера, но смещен вниз, для отображения нижней части div. Необходима полоса прокрутки.Пробел над элементом div является верхним полем элемента p.

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

Нет похожих вопросов

...