HTML, CSS — ошибка позиционирования absolute и 100% height для родительских областей и дочерних

Html файл:
<!doctype html>
<html lang="ru">
 
<head>
 
<meta charset="UTF8">
<title>Физика, математика, информатика</title>
<link href=./css rel="stylesheet" type=text/css>
 
</head>
 
<div id=div2><p id=с_отступом>aaa</p></div>
<div id=div3><p id=с_отступом>bbb</p></div>
<div>ccc</div>
 
</html>


Css файл:
html
{
    position : absolute;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    margin-top : 0;
    margin-right : 0;
    margin-bottom : 0;
    margin-left : 0;
    border-top : 0;
    border-right : 0;
    border-bottom : 0;
    border-left : 0;
    padding-top : 0;
    padding-right : 0;
    padding-bottom : 0;
    padding-left : 0;
}
 
body
{
    position : absolute;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    margin-top : 0;
    margin-right : 0;
    margin-bottom : 0;
    margin-left : 0;
    border-top : 0;
    border-right : 0;
    border-bottom : 0;
    border-left : 0;
    padding-top : 0;
    padding-right : 0;
    padding-bottom : 0;
    padding-left : 0;
}
 
div
{
    position : absolute;
    top : 0;
    right : 15%;
    bottom : 0;
    left : 15%;
    margin-top : 0;
    margin-right : 0;
    margin-bottom : 0;
    margin-left : 0;
    border-top : 0;
    border-right : 0;
    border-bottom : 0;
    border-left : 0;
    padding-top : 10px;
    padding-right : 10px;
    padding-bottom : 10px;
    padding-left : 10px;
    background-color : rgba(222, 222, 222, 1);
}
 
#div2
{
    position : absolute;
    top : 0;
    right : 85%;
    bottom : 0;
    left : 0;
    margin-top : 0;
    margin-right : 0;
    margin-bottom : 0;
    margin-left : 0;
    border-top : 0;
    border-right : 0;
    border-bottom : 0;
    border-left : 0;
    padding-top : 10px;
    padding-right : 10px;
    padding-bottom : 10px;
    padding-left : 10px;
    background-color : rgba(111, 111, 111, 1);
}
 
#div3
{
    position : absolute;
    top : 0;
    right : 0;
    bottom : 0;
    left : 85%;
    margin-top : 0;
    margin-right : 0;
    margin-bottom : 0;
    margin-left : 0;
    border-top : 0;
    border-right : 0;
    border-bottom : 0;
    border-left : 0;
    padding-top : 10px;
    padding-right : 10px;
    padding-bottom : 10px;
    padding-left : 10px;
    background-color : rgba(111, 111, 111, 1);
}
 
@font-face
{
    font-family : "Ubuntu-R";
    src : url("./Ubuntu-R.ttf");
}
 
h1
{
    margin-top : 44px;
    margin-bottom : 0px;
    font-family : "Ubuntu-R";
    font-size : 36px;
}
 
h2
{
    margin-top : 33px;
    margin-bottom : 0px;
    font-family : "Ubuntu-R";
    font-size : 28px;
}
393892d1398937350
  • Вопрос задан
  • 3032 просмотра
Пригласить эксперта
Ответы на вопрос 3
ghaiklor
@ghaiklor
NodeJS TechLead
WAT?
Зачем html, body position absolute?
Зачем куча padding и margin?
Что вы хотите сделать? Здесь же глаз выколоть можно и это оправдано...
Ответ написан
Комментировать
hadra
@hadra
Да он прав.. Зачем ?
почитай про position, не надо его впихивать куда угодно. И кроме абсолютного позиционирования, если еще относительное.

А проблема у тебя из-за того что у тебя все абсолютное "такого не должно быть"
html,body{position:relative;}
Это может и не сработае, значит у тебя еще что-то лишнее..
вот короче читай

Или залей код нормально.
Ответ написан
Комментировать
@wdtime_ru
позиционирование элементов на странице подробно: position css
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы