У меня настроена веб-страница, на которой у меня есть несколько ссылок посередине, а под ней div плавает справа, около 25% экрана и еще один div с position: fixed, left: 0, bottom: 0. На моем рабочем столе в Firefox изображение внутри div с фиксированной позицией находится прямо в нижнем левом углу. Однако на iPad есть большой зазор под плавающим правым div. Изображение будет либо начинаться ниже области просмотра на экране, либо даже дальше вниз по странице с огромным разрывом в содержании между верхней частью изображения и нижней частью последнего блока текста.

HTML:

  <div class="wrapper">
     <div id="containerLeft">
        <img id="ipad" src="images/ipad-small.png" alt="a picture of an ipad held in a hand" />
     </div> 

     <div id="containerRight">
        <article>
           <p> stuff </p>
           <p> more stuff </p>
        </article>
     </div>
  </div>

CSS:

    .wrapper{
    width: 100%;
    overflow: hidden;
}
/* ------------ Left Container Content - image ------------- */
#containerLeft{
    width: 50%;
    z-index:-9999; 
    overflow: hidden;
    float: left;
}

#containerLeft img{
    position: fixed;
    left: 0;
    bottom: 0;
    display: block;
}

/* ---------- Right Container Content - copy on the side ---------------- */
#containerRight{
    width: 25%;
    float: right;
    margin: 50px 3.854167% 0 0;
}

#containerRight article{
    width: 100%;
}

#containerRight article p{
    line-height: 140%;
    font-weight: 400;
    font-size: 0.45em;
    text-align: right;
    font-style: italic;
    overflow: visible;
    padding: 1%;
    margin: 2% 0 0;
}

Кто-нибудь может сказать по этому поводу, что вызывает большой зазор в нижней части экрана?

0
Ethan22 30 Сен 2013 в 04:24
Я проверил несколько вещей. Я удалил все содержимое из тела, все еще прокручиваемое на iPad. Я сделал фон полностью черным, т.е. без изображений. По-прежнему прокручивается. Это похоже на минимальную высоту для iPad, но каждый раз, когда я пытаюсь установить ее в теге html (max-height: 760px), он ничего не делает.
 – 
Ethan22
30 Сен 2013 в 04:46
Привет, Итан, добро пожаловать в Stack Overflow. Это происходит только на iPad или на любом устройстве с маленьким экраном (например, смартфоне, нетбуке и т. Д.)? Если это не проблема, связанная с iOS / Safari, вам нужно кое-что исправить. В любом случае, если вы хотите включить информацию о своем вопросе, отредактируйте ее - лучше включить ее прямо в свой вопрос. Спасибо!
 – 
Qantas 94 Heavy
30 Сен 2013 в 04:50
Я использую симулятор iOS на Mac, поэтому могу тестировать только в Mobile Safari. Из-за вашего ответа я зашел на ipadpeek.com, чтобы проверить его, и обнаружил, что прокрутки нет ... Поскольку я у меня нет настоящего устройства, я не могу подтвердить, которому я должен доверять, но я хотел бы больше склоняться к тому, что разработано Apple. Не следует ли мне доверять симулятору iOS?
 – 
Ethan22
30 Сен 2013 в 04:56

1 ответ

Лучший ответ

Это зависит от разрешения вашего экрана. Вот в чем проблема:

#containerLeft img{
position: fixed;
left: 0;
bottom: 0;
display: block;
}

Нижний атрибут дает вам гораздо больше свободного места на экранах с высоким разрешением.

1
jbrya029 30 Сен 2013 в 04:33
Как я могу закодировать это так, чтобы изображение также находилось в нижнем углу экрана iPad? Позиция: absolute тоже не работала.
 – 
Ethan22
30 Сен 2013 в 04:41
Я бы попытался найти кого-нибудь с Ipad, чтобы протестировать его для вас. Возможно, симулятор считывал размер экрана вашего компьютера и переводил его на симулятор «ipad».
 – 
jbrya029
30 Сен 2013 в 05:08
Dang iOS Simulator. Пытался оставаться в некоторой степени самодостаточным, но если ничего не поделаешь ... Хорошо, подойдет, спасибо за помощь.
 – 
Ethan22
30 Сен 2013 в 05:11