All geek questions in one place

Height: 100%; float: left, is there any way?

I find it difficult to find resources to solve my particular dilemma.

I would like to create a simple horizontal scroll screen. This site will not contain anything other than images collected next to each other, and each image will have a screen height of 100%. No text, menu buttons, etc.

Here is my code:

<!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>

Floating work, when the combined image width does not overlap the width of the browser window, but when I set the image style height to 100%, they do not float to the left, they are stacked on top of each other.

Is there a way that images can overflow to the right of each other?

It seems crazy that I have so many problems with something that seems like it should be easy to implement.

Thanks so much for watching, I really hope this is possible.

E.

+4
source share
1 answer

height: 100% is actually not possible with CSS, since the height attribute does not apply to the browser viewport, but the height of the parent element (which is a div or body in your case). The body will not expand again to the browser window, its height will automatically change to your content.

I would strongly suggest using JavaScript for this task. This will save you a lot of PITA.

Using jQuery, for example, you can do something like

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

Or with native JavaScript: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ (which isn’t so much fun ... cross-browser problems, as always ...).

+1
source

Source: https://habr.com/ru/post/1302658/

More articles:


All Articles