Блог

Главная - Вопросы по программированию - Выравнивание по низу на мобильных устройствах

Выравнивание по низу на мобильных устройствах

#html #css #mobile #positioning

#HTML #css #Мобильный #позиционирование

Вопрос:

это мой первый пост здесь.

У меня проблемы с HTML и CSS, потому что я пытаюсь сделать простой веб-сайт размером 3 div, ориентированный на мобильные устройства. Для ПК я создал другую веб-страницу.

В портретном режиме, похоже, хорошо работает на устройствах Android, я пробовал только на двух устройствах. Для iPhone и iPad происходит обрезка нижней части, и страница плохо помещается, пользователю необходимо прокрутить вниз, чтобы увидеть нижнюю часть. Мне нужно, чтобы страница хорошо помещалась на экране.

Проблемы становятся больше, когда мы переводим устройство из портретного в альбомный режим… Страница просто плохо помещается на любом устройстве: нижняя панель остается за пределами экрана, а при прокрутке вниз панель прокручивается вместе и перекрывает содержимое. Я уже пытался использовать процент, но работает плохо, потому что изображения будут вставляться.

Вот код CSS:

 @charset "utf-8";
 body {
   background-color: #2419B2;
 }
 #superheader {
position:absolute;
left:0px;
top:0px;
width:100%;
height:45px;
background-color:#9991FF;
font-family: Verdana, Geneva, sans-serif;
font-variant:small-caps;
color: #FFF;
 }
 #supercontent {
position:absolute;
left:0px;
top:45px;
width:100%;
height:100%;
overflow: auto;
 }
 #superfooter {
position:absolute;
left:0px;
bottom:0;
width:100%;
height:30px;
background-color: #0F0A4A;
 }

И вот мой html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />

<title>3 divs</title>
<link rel="stylesheet" href="stylemobilepure.css">
</head>
<body>

<div id="superheader">
Lorem ipsum dolor sit amet

</div>

<div id="supercontent">
consectetur adipiscing elit.

</div>

<div id="superfooter">
 Vestibulum iaculis lectus eu porttitor fringilla

</div>

</body>
</html>

Большое вам спасибо.

Ответ №1:

Добро пожаловать в Stack Overflow!

Лучший способ (который я нашел) подогнать страницу к экрану — использовать

 html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

и просто дать все (или оболочку) width: 100% .

Попробуйте абсолютно расположить каждый div и указать каждый width: 100% .

Это должно сработать:

 html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    background-color: #2419B2;
}

div {
    width: 100%;
}

#superheader {
    height: 45px;
    position: absolute;
    top: 0px;
    background-color: #9991FF;
    font-family: Verdana, Geneva, sans-serif;
    font-variant: small-caps;
    color: #FFF;
}

#supercontent {
    height: 80%;
    position: absolute;
    top: 45px;
}

#superfooter {
    height: 30px;
    position: absolute;
    bottom: 0px;
    background-color: #0F0A4A;
}

Приветствия!

Комментарии:

1. Привет, jczimm, спасибо за ваш ответ. Итак… Ваш код очень хорошо подходит для Android, но на iPhone и iPad плохо подходит только в ландшафтном режиме =/