высота: 100%; float: left, есть ли способ? - PullRequest
Новая
       9

высота: 100%; float: left, есть ли способ?

4 голосов
/ 28 февраля 2010

Мне трудно найти ресурсы для решения моей конкретной дилеммы.

Я бы хотел сделать простой горизонтальный тип полосы прокрутки. Этот сайт будет содержать только изображения, расположенные рядом, и каждое изображение будет иметь 100% высоту экрана браузера. Нет текста, кнопок меню и т. Д.

Вот мой код: 

<!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" />
<title>Untitled Document</title>
</head>

<body style="margin:0; padding:0; overflow:scroll; height:100%;">
<div>
<img style="height:100%; float:left; " src="file:///C|/Documents and Settings/0000ff/My Documents/tuesday/1.jpg" />
<img style="height:100%; float:left; " src="file:///C|/Documents and Settings/0000ff/My Documents/tuesday/2.jpg" />
</div>

</body>
</html>

Плавающее работает, когда объединенные ширины изображения не перекрывают ширину окна браузера, но когда я установил высоту стиля изображения на 100%, они не будут перемещаться влево, они складываются друг с другом.

Есть ли способ заставить изображения продолжать переполняться вправо друг от друга?

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

Большое спасибо за поиск, я очень надеюсь, что это возможно.

Е.

1 Ответ

1 голос
/ 28 февраля 2010

height: 100% на самом деле невозможно с CSS, поскольку атрибут height относится не к окну просмотра браузера, а к высоте родительского элемента (который является div или body в вашем случае). Тело снова не будет расширено до области просмотра браузера, его высота будет автоматически уменьшена до вашего контента.

Я бы настоятельно рекомендовал использовать JavaScript для этой задачи. Это сэкономит вам много PITA.

Например, используя jQuery, вы можете сделать что-то вроде 

$(document).height() - $('body').offset().top 
$(window).height()

Или с "родным" JavaScript: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ (что не так весело ... кросс-браузерные проблемы, как всегда ...).

...