How would I be able to get a website to auto-fit in the page?
It's a landscape design which needs no scrolling.
This question is related to
html
css
web
responsive-design
resize
If its in a landscape then you will be needing more width and less height! That's just what all websites have.
Lets go with a basic first then the rest!
The basic CSS:
By CSS you can do this,
#body {
width: 100%;
height: 100%;
}
Here you are using a div with id body, as:
<body>
<div id="body>
all the text would go here!
</div>
</body>
Then you can have a web page with 100% height and width.
What if he tries to resize the window?
The issues pops up, what if he tries to resize the window? Then all the elements inside #body would try to mess up the UI. For that you can write this:
#body {
height: 100%;
width: 100%;
}
And just add min-height max-height min-width and max-width.
This way, the page element would stay at the place they were at the page load.
Using JavaScript:
Using JavaScript, you can control the UI, use jQuery as:
$('#body').css('min-height', '100%');
And all other remaining CSS properties, and JS will take care of the User Interface when the user is trying to resize the window.
How to not add scroll to the web page:
If you are not trying to add a scroll, then you can use this JS
$('#body').css('min-height', screen.height); // or anyother like window.height
This way, the document will get a new height whenever the user would load the page.
Second option is better, because when users would have different screen resolutions they would want a CSS or Style sheet created for their own screen. Not for others!
Tip: So try using JS to find current Screen size and edit the page! :)
You can use CSS to do it for example
<style>
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
background-color:#DDD;
}
</style>
You should set body and html to position:fixed;, and then set right:, left:, top:, and bottom: to 0;. That way, even if content overflows it will not extend past the limits of the viewport.
For example:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS:
html, body, {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
Caveat: Using this method, if the user makes their window smaller, content will be cut off.
Source: Stackoverflow.com