Beedoo Posted December 2, 2010 Share Posted December 2, 2010 Hello,On every webpage i have i can scroll a little bit down while there is no purphose for it, because i can see the full page without having to scroll.What can i do to disable to scroll on a webpage? Link to comment Share on other sites More sharing options...
Ingolme Posted December 2, 2010 Share Posted December 2, 2010 I would check to see what's causing it to scroll. Maybe you have some margin, padding or borders that you don't need.I wouldn't disable scrolling because some people may have smaller screens than you do.However, if you really think disabling scrolling is the best solution to the problem, you can set the overflow property of the <body> element to "hidden" in CSS. Link to comment Share on other sites More sharing options...
Beedoo Posted December 2, 2010 Author Share Posted December 2, 2010 I checked but i can't find any unnecessary morgin or padding.Maybe it is somthing in my css style html, body { height:100%;}body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #464646; text-decoration: none; background-color: #FFFFFF; margin:0; padding:0;}#leftMain { display:block; float:left; width:251px; height:92%; background:#0c6500; padding:39px 0;}/#main { display:block; float:left; width:492px; height:100%; background:#FFFFFF; margin:0 0 11px 11px;}#mainphotos { width:492px; padding:4px 0 4px 0; border-top:1px solid #D4D4D4; border-bottom:1px solid #D4D4D4;}#mainphotos img{ padding:1px; border:0;}#misc1 { width:492px; padding:12px 0 12px 0; margin-top:12px; border-top:1px solid #D4D4D4; border-bottom:1px solid #D4D4D4; text-align:center; clear:both;}#maintext { line-height:18px;}div#navbar { width: 251px; display:block; float:left; padding-top:25px;}div#navbar ul { margin:0; padding:0;}div#navbar li { list-style-type:none; display:block; float:right; width:251px; height:20px; background-image: url(../images/bg-nav.gif); background-repeat: no-repeat; text-align:right;}div#navbar li a { display:block; float:left; width:201px; height:20px; text-decoration: none; margin:0; padding:0; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight:bold; line-height:20px; padding-right:51px;}div#navbar li a:link { color: #FFFFFF:}div#navbar li a:visited { color: #FFFFFF;}div#navbar li a:hover { color: #FFFFFF; text-decoration:none; background-image: url(../images/bg-nav-over.gif); background-repeat: no-repeat;}div#navbarAlt { width: 251px; display:block; float:left; padding-top:202px;}div#navbarAlt ul { margin:0; padding:0;}div#navbarAlt li { list-style-type:none; display:block; float:right; width:251px; height:50px; background-image: url(../images/bg-nav-alt.gif); background-repeat: no-repeat; text-align:right;}div#navbarAlt li a { display:block; float:left; width:201px; height:50px; text-decoration: none; margin:0; padding:0; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight:bold; line-height:50px; padding-right:51px;}div#navbarAlt li a:link { color: #FFFFFF:}div#navbarAlt li a:visited { color: #FFFFFF;}div#navbarAlt li a:hover { color: #0c6500; text-decoration:none; background-image: url(../images/bg-nav-alt-over.gif); background-repeat: no-repeat;}#special-box-left { width: 240px; display:block; float:left; line-height:normal; border:1px solid #D4D4D4; min-height:146px;}#special-box-left h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #464646; text-decoration: none; background-color: #D4D4D4; margin:0; padding:0; line-height:25px; text-indent:8px;}#special-box-left p, ul { padding:8px 8px 3px 8px; margin:0;}#special-box-right { width: 240px; display:block; float:right; line-height:normal; border:1px solid #D4D4D4; min-height:146px;}#special-box-right h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #464646; text-decoration: none; background-color: #D4D4D4; margin:0; padding:0; line-height:25px; text-indent:8px;}#special-box-right p, ul { padding:8px 8px 3px 8px; margin:0;}h1, h2, h3, h4, h5, h6 { margin: 15px 0;}p { margin: 15px 0;}ul, ol { margin: 15px 0 0 15px;}.clear { clear:both;}a, a:visited { color:#0c6500; text-decoration:underline; font-weight:bold;}a:hover { color:#0c6500; text-decoration:none;}#footer { font-size: 10px; color:#B4B4B4; text-align:center; padding:20px; line-height:18px;}#footer a:link, #footer a:visited { color:#B4B4B4; text-decoration:none; font-weight:normal;}#footer a:hover { color:#B4B4B4; text-decoration:underline;} Link to comment Share on other sites More sharing options...
Ingolme Posted December 2, 2010 Share Posted December 2, 2010 If you have any elements that have 100% height, adding any margin, padding or border to the top or bottom will cause it to exceed the window height. Link to comment Share on other sites More sharing options...
Beedoo Posted December 2, 2010 Author Share Posted December 2, 2010 I checked all the height and margins but i couldn't find any reason why i still can scroll?Isn't there a way to disable the scrollbar? I don't want that it is possible to scroll my pages. Link to comment Share on other sites More sharing options...
Synook Posted December 2, 2010 Share Posted December 2, 2010 You can disable the scrollbar by setting the overflowing element to overflow:hidden using CSS, however this presents a problem if the user legitimately does need to scroll to see all actual content. Do you have a link to your page so we can see? Link to comment Share on other sites More sharing options...
thescientist Posted December 2, 2010 Share Posted December 2, 2010 if you look at your site with the web developers toolbar in FF, you can choose to outline all elements and maybe it will give you an idea of how wide and tall everything is (visually, with borders). Or you can give everything borders in CSS, as well. Link to comment Share on other sites More sharing options...
jeffman Posted December 2, 2010 Share Posted December 2, 2010 It's not just screen size you have to worry about. Different browsers have smaller viewports, because the toolbars are different sizes, and some can be customized, which makes them bigger and smaller. And what about the user who does not like to browse with maximized windows? Link to comment Share on other sites More sharing options...
DizzyDan Posted December 2, 2010 Share Posted December 2, 2010 Should steer clear of those band-aid fixes, best to find the source of the problem and fix it now. Saves you from a bigger headache later. Unless you have stock in advil.EDIT: Though it depends on the 'reason' why you would disable it. Link to comment Share on other sites More sharing options...
Dilated Posted December 3, 2010 Share Posted December 3, 2010 #leftMain { display:block; float:left; width:251px; height:92%; background:#0c6500; padding:39px 0;} You're mixing percentages with pixels here, which means even if you do get it working right with your resolution, it won't look right on someone else's, unless 92% of their viewport height is exactly 78px less than 100% of their viewport height (I'm guessing this is a direct descendant of <body>). The best solution for you here would be to use box-sizing: #leftMain { display: block; float: left; width: 251px; height: 100%; padding: 39px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #0c6500;} That will include the padding in the height calculation, so you don't have to attempt to subtract it from the height as a percentage. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.