Как добавить отступы внизу сайта, содержащие плавающее img? - PullRequest
Новая
       0

Как добавить отступы внизу сайта, содержащие плавающее img?

0 голосов
/ 11 августа 2010

Я создаю веб-страницу, в которой 'img' находится внутри элемента div как самый низкий элемент, отображаемый на странице.Страница резко заканчивается в нижней части изображения.Для хорошей эстетики я бы хотел, чтобы пользователь мог прокручивать изображение чуть дальше изображения (20 пикселей или около того).Я попытался применить поле margin-bottom и padding-bottom к телу, содержащему div и изображению, о которых идет речь, но безрезультатно.

У меня нет, и я не буду пытаться делать это, используя HTMLдобавить буфер или любое другое хакерское решение.

Страница: http://www.roughgiraffed.com/about.php (пожалуйста, не судите нас, лол, все еще очень грубо (каламбур) и далеко от развертывания)

Заранее спасибо за любую помощь!

Ответы [ 4 ]

2 голосов
/ 11 августа 2010

Попробуйте добавить overflow: hidden; на #container.Плавания отбирают .profile деления из потока документа, что заставляет браузер думать, что #container имеет такую ​​же высоту, как и общий текстУстановка переполнения как-то сбрасывает это.Добавив его, вы можете установить поле для контейнера, как обычно.

0 голосов
/ 11 августа 2010

Вы должны иметь возможность добавить поле margin-bottom к тегу body. 

body { margin-bottom: 20px; }

В противном случае вы можете добавить это поле margin-bottom в свой контейнер 

<div id="container"> 
   <img src="yourimage.jpg" alt="" />
</div>

#container { margin-bottom: 20px; }

ПРИМЕЧАНИЕ.: оба метода работали при тестировании

0 голосов
/ 11 августа 2010

Возможно, вы создали элемент THE с помощью display: inline?

Встроенные элементы не могут иметь отступы или поля

0 голосов
/ 11 августа 2010

Я сделал следующее в качестве теста, и это приводит к переполнению тела и отображению вертикальной полосы прокрутки. Попробуйте. 

<html>
<body>
   <div id="container">
      <div id="imageContainer" style="padding-bottom:1000px;">
         <img src="youImage.jpg"/>
      </div>
   </div>
</body>

Кроме того, следующий подход немного отличается: 

<html style="height: 110%;">
<body>
   <div id="container">
      <div id="imageContainer">
         <img src="youImage.jpg"/>
      </div>
   </div>
</body>​​​
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...