-1

I am trying to make a horizontally scrolling website, the difficulty i am facing is to fix my page's height to the device's. Furthermore, if i fix the height's value in the css then it becomes hard coded for that particular screen size, so whenever i open the page on a differently sized monitor the hard coded value creates trouble. I have used a very basic css till now, here it is : 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style media="screen">
  #body {
    width: 4000px;
    height: auto;
    max-height:100vh;
  }
</style>
<title></title>
</head>
<body id=body>
--\\CONTENT GOES HERE \\--
</body>
</html>
Mukul Gahlot
  • 1
  • 2
  • 1
    `max-height: 100vh` should indeed be constraining your `#body` to never go beyond that height. You'll obviously need to make sure none of the content exceeds that though. You may wish to add `overflow-y: hidden`. Other than that, it's nuclear what problem you're having -- it would help to specify the problem you're having with your current approach. – Obsidian Age Dec 10 '18 at 02:04
  • Possible duplicate of [Make body have 100% of the browser height](https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) – leorleor Dec 10 '18 at 02:05
  • Or Possible duplicate of [Horizontal scrolling page, mobile browsers adding vertical height](https://stackoverflow.com/questions/35641448/horizontal-scrolling-page-mobile-browsers-adding-vertical-height). – Tedinoz Dec 10 '18 at 02:32

1 Answers1

0

This should give you what you are looking for. You can add an overflow-yproperty as well just to be sure y scrolling is disabled. Just make sure the rest of your content is responsive so that it can resize with the view height.

   #body { 
        width: 4000px;
        height: auto;
        max-height: 100vh;
        overflow-y: hidden;
    }
Ben
  • 58
  • 7