I have tried wording this question in many different ways on Google. I have found one result with a similar question. The response was that the question was too vague. This will be my first question, I'll do my best to try and be as detailed as possible.
The very page that this question is being asked on has no scroll bar at the bottom, suggesting overflow-x:hidden was used. However when clicking on the restore down icon at the top right of the page, left of the close icon, you will notice that the x or left to right scroll bar is now present. This is the effect that I am trying to achieve. How do I write my page where it has no left to right scroll bar until minimized?
Here is the code that I have in CSS:
body {
overflow-x:hidden;
overflow-y:auto;
width:1650px;
max-width:1650px; background-image:url('LiraBG5.png'), url('LiraBG3.png');
background-repeat:repeat-x, repeat; height:100%;
}
For HTML:
<!DOCTYPE html>
<html>
<head>
<link href="Lira.css" rel="stylesheet" type="text/css" />
</head>
<body id="body">
</body>
</html>
I have tried overflow-x:auto; in place of overflow-x:hidden; however this results in the page having an x or left to right scroll bar when maximized which is what I am trying to avoid. Is it possible that it may require JavaScript for this effect?
You don't want overflow-x: hidden - that won't give you a scrollbar. Remove that from the body and try something like this (run the snippet and click "full page" to see it in action)
#content {
width: 1000px;
margin: 0 auto;
background: #aaa;
}
<div id="content">Content here</div>
This tells the div to fix its size at 1000 pixels wide, and margin: 0 auto tells it to centre itself horizontally if there's room. If there isn't room, you'll get a scrollbar.
The HTML element of the document, by default, has overflow: auto. This causes scrollbars to appear when the content within the document extends beyond the boundries of the browser window.
In the case of this website. There is a centered div which has a width of 1000px. When the browser window width is reduced below 1000px then the overflow on the html element will display by default.
As a side note:
Many modern websites are built with a responsive framework (eg. Bootstrap). These responsive frameworks ensure that all content is visible within the viewport regardless of the window size and therefore remove the need for horizontal scrolling.
Related
as you know if html content vertical view is more than browser window, a vertical scroll bar will add to page. It will cause moving html content into left which does not have a good view.
You can avoid this treat using this CSS code:
html{
overflow: scroll;
}
But there is a problem with this code, you will always see a disabled scroll bar on right side of the page. Now let's check another way, in this way you will subtract body width of the scroll width:
body {
width: calc(100vw - 68px);
margin-left: 34px;
}
This will put body in center and if in future a vertical scroll bar add to the page, it won't affect content and will be on the right side out of the body area! This way is good but there is a very little problem. you have subtracted your body width!!! Just think I have a fully filled body area! In this situation I need the whole 100% width and also I do not want the scroll bar to move my content into left and also I do not want to see a disabled scroll bar always!
So I'm looking for a way I can make scroll bar while showing on top of html content. so Nothing will move and also I have 100% width and when ever it is needed I will see scroll bar.
Is there such trick? Hope I'm clear enough.
I am currently working on a company website. I've used negative margins plus positive padding to make the footer and top bars fill the 100% width of the page even though they are contained within another div, the wrapper set at about 65%. This is, as far as I know, a relatively well known way to do it but causes that content to go beyond the sides of the page.
Anyway, in order to prevent sideways scrolling there's x-overflow: hidden on both the html and body. This works when I'm at my computer but when I was showing the website to my coworkers today it was not working. I had my laptop connected to a large TV through an HDMI cable and I was able to scroll to the side (no scroll bar, just able to with a three button mouse). Went back to my normal setup (same laptop with a second monitor attached) and I can no longer scroll.
Code is something like this:
HTML
<div id="wrapper">
<div class="extend">
This is the div extending beyond the page and causing sideways scroll.
</div>
</div>
CSS
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
.extend {
padding-left:35%;
margin-left:-35%;
padding-right:35%;
margin-right:-35%;
}
#wrapper {
width:65%;
margin:0 auto;
}
This isn't a super huge issue for me (unless I discover it happens in more cases). I doubt my website will be viewed that often on a large TV connected to a laptop but I am curious as to what's causing it. Or if anyone has any better ways of extending divs past their containers, I'd be willing to hear about those too. Thanks in advance for any input!
body {
margin: 0;
padding: 0;
}
#wrapper {
width:65%;
margin:0 auto;
}
.extend {
/* 35/65*100 = 26.92 */
margin-right:-26.92%;
margin-left:-26.92%;
background-color: red;
}
.extent-content {
width:100%;
padding:10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Full width example</title>
</head>
<body>
<div id="wrapper">
<div class="extend">
<div class="extent-content">
This is the div extending beyond the page and causing sideways scroll.
</div>
</div>
</div>
</body>
</html>
I like to use a structure that has an outer wrapper and inner wrapper per section. The inner wrapper will get the fixed width and the outer typically gets 100% of the screen. This allows you to have full width sections and contained sections together without using negative margins.
Fiddle with example:
http://jsfiddle.net/h0k5pape/2/
Code style:
<div class="outer">
<div class="inner"></div>
</div>
I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.
I am doing a small tutorial on responsive design, but I have a problem.
I am going with the classic off-canvas menu swiping in from the left side, but when I enable the menu I can still scroll horizontally to see the full content, rather than using the menu-button to hide the menu.
See the following pen:
http://codepen.io/webconsult/pen/jmCit
Note that codepen hides the tag. For the meta viewport tag I am using:
<meta name="viewport" content="width=device-width, initial-scale=1">
I am suspecting that I should set up the the viewport tag differently?
You can play around with the viewport tag by clicking on the settings-cog in the html frame.
Add this to your css
body {
overflow-x:hidden;
}
you have
.site-wrapper {
width:100%;
}
according to your css on larger screens the main content occupies 100% of width. On smaller screens when you open your off-canvas menu - it produces horizontal-scroll because your .site-wrapper+off canvas occupy more than 100% of width -100% for warrper + 75% aside.navigation.
By adding overflow-x:hidden; on body it will the scroll-bar.
This is not the best solution though - having
.site-wrapper {
overflow-x:hidden;
}
is better but something is up with your header -behaves a little wierd when i add this property.
I have an index page that includes both a left and a right iFrame. For some reason on the second iFrame it shows a scroll bar for its iFrame and another scroll bar for the whole page.
I have been trying to remove the scroll bar for the whole page and just leave the scroll bars for the 2 iFrames only
When I go and change the css property to overflow hidden for the body,html element it also removes the scroll bar for both iFrams
I have even tried to set the iFrame element overflow-y: to auto and the body,html overflow to hidden.
That still didn't work.
The second issue I am having is that the iFrame does not extend all the way to the bottom of the page even when I specified the height to be a 100% .
I have been fiddling with the CSS but go no luck so far. I would appreciate it if anyone can try to help me out.
Below is the link to my webpage, and the css snippet. Thank you!!!
html,body{ height: 100%; margin:0;padding:0; }
iframe{
height:100%; margin:0;padding:0; border: 0;
}
http://15c04752.ngrok.com/simplemenu/menus/demo (Text might be rendered smaller in different browsers please hit ctrl+ cmd+ on your keyboard to get the scrolling to show)
To remove the scrollbar for the whole page, add this rule:
body, html {
overflow: hidden;
}
To enable scrollbars on the iframes, add this attribute:
<iframe ... scrolling="yes"></iframe>
Source
And that's how it looks like, if you add both:
There is no scrollbar for the whole page, no scrollbar for the left iframe (because the content is fully visible) and a scrollbar for the right iframe (because the content is not fully visible). If you make the windows smaller, the scrollbar for the left iframe will appear.
I had a similar issue when using an iframe. The element containing the iframe was not long enough to justify a second scrollbar; its just a youtube video taking up about 600 pixels in height so I did not need a second scrollbar. The fix for me was just
html, body { height: 100%; }
in CSS. If that doesn't help my next best guess is to use webkit to just visibly hide them if all else fails.