Page that fit the screen without scrollbars

Question

I'm working on my web site. If you go to the page after the login, you can see that the page scrolls horizontally and vertically. Is it possible to make the page fit the entire screen without need of the scrollbar? I'm using materialize and the second column of the site (the pale blue part) has a 2px margin.

Thank you!

(for the login "prova" and "prova")

SOLVED:

body {
overflow:hidden;}

How are we supposed to get past the login screen? Also, you are missing a required doctype on the login which makes me believe you are missing one on the rest of the site, too. — Rob, May 15 '16 at 14:00

score 1 · Answer 1 · answered May 15 '16 at 13:50

1

Yes it is possible. Just turn off scrolling. You can get the screen width and height at the beginning. Then write something like this to update your component sizes.

function updateSize() {

var winWidth  = $(window).width(),

winHeight = $(window).height();

$('.loginButton').css({

width:winWidth * 0.2,

height:winHeight * 0.2

});

}

$(window).resize(function() {

updateSize();

});

answered May 15 '16 at 13:50

Serhan Oztekin

475
7
20

Is it possible to do without JS? – Roberto Aureli May 15 '16 at 13:53
Thank you, I'll try it. Another question: What's the line "$:('.loginButton').css()"; – Roberto Aureli May 15 '16 at 13:57
1

@RobertoAureli Yes, it is possible to do so without javascript. In fact, there is no reason to use js at all. – Rob May 15 '16 at 13:59
It's just an example on how to get and modify the size of an html component. You can replace that code with any of your html component's class or id that you want to change it's size.@RobertoAureli – Serhan Oztekin May 15 '16 at 14:00
@Rob how can I do it? – Roberto Aureli May 15 '16 at 14:01
Another way would be to use it like button { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } It provides a non JS solution as @Rob mentioned – Serhan Oztekin May 15 '16 at 14:05
@SerhanOztekin you code throws me an error: $ is not defined – Roberto Aureli May 15 '16 at 14:06

Rob · Answer 2 · 2016-05-15T14:09:14.473

1

You have a 2px margin on #map that's causing the horizontal scroll bar.

You need to add a doctype <!DOCTYPE html>. All modern web pages require this or else you will be in "quirks mode"; a place you never want to be. Adding that may change your layout to some extent but you started out in quirks. You don't want to be in quirks.

edited May 15 '16 at 14:09

answered May 15 '16 at 14:07

Rob

14,746
28
47
65

Can i remove the scollbar without removing the margin? And for the vertical one? (i've added the doctype) – Roberto Aureli May 15 '16 at 14:08
I don't understand the purpose of the 2px margin. – Rob May 15 '16 at 14:17
Only for "aesthetic" reasons – Roberto Aureli May 15 '16 at 14:18
You need to look into your actual widths to see if they are adding up to 100% in actual pixels. Absolutely positioning that element is taking it out of the normal flow and making it overflow the body which is what is causing the horizontal scrollbar. The problem, vertically, is more work than can be handled here and should probably be a separate question after you fix the horizontal one. – Rob May 15 '16 at 14:23
Pratically what should I do? Set it to relative? – Roberto Aureli May 15 '16 at 14:34

Page that fit the screen without scrollbars

2 Answers2