I need to give an div a width of 120%. But I don't want horizontal scrollbars, so I set overflow-x hidden for the body. Can the normal website view be harmed by that command?
CSS
body{
overflow-x: hidden;
}
If you have a div with width: 120% of the body and you give
body{
overflow-x: hidden;
}
You will not see that 20% more of the div's content. It will he hidden.
See the working sample: http://jsfiddle.net/carloscalla/tducn765/
It is not "harmful". If you don't want to hide that 20% then you should use overflow-x: auto;
Related
I have this nasty horizontal scroll bar at the very bottom of my HTML page:
I tried this so far:
body {
width: 900px;
margin: auto;
overflow-x: hidden;
}
but no luck.
You can see the entire page implementation here. Also, you can view the page in action here.
The problem is not in body. It is in your div which has the id="main".
You added overflow-x: scroll; there. There are two solutions for this
In your #main {} CSS:
Solution 1: If you want to add scroll on content overflow
If you don't want to scroll initially but when the content overflow you want a scroll there then you can change overflow-x: scroll; to overflow-x: auto;
Solution 2: If you don't want to add scroll at all
If you don't want to have a scroll in any case then you can change overflow-x: scroll; to overflow-x: hidden;
See developers mode for reference.
You can add max-width:100vw; in your body.
This makes the maximum width of your body 100% of your screen size.
body{
max-width:100vw;
}
I am trying to make the horizontal scroll bar hidden so that the user cannot scroll . I have read somewhere that my body tag should contain a width of 100% and to set overflow-x:hidden but the following code but I can still scroll a bit on my mobile media query as shown below:
html, body {
background-color: silver;
height: 400%;
width: 100%;
overflow-x:hidden;
}
enter image description here
Check the example below, I've set the div width to be higher than my window and in the body tag, I remove the scroll using an overflow-x: hidden.
Since I don't have access to your source I can't help much.
HTML
<body>
<div class="scroll">
<p>Hi</p>
</div>
</body>
CSS
body {
overflow-x: hidden;
}
.scroll {
min-height:800px;
min-width: 1000px;
}
Working example: FiddleJs Example, note that if you remove the overflow-y the horizontal bar will show up. Maybe you're overwriting the overflow, try to mark it as:
overflow-y: hidden !important
Or open your console and debug in there.
I am using the Bootstrap Modal to display some content on my webpage. I have set the height of the modal to a fixed 80% to work properly in long screens because I have a lot of content in the modal-body. With the 80% height I would like the Header and the Footer to be fixed in their places but the entire content seems to be scrollable i.e. either my header or footer go on scrolling. I want to keep the header and footer fixed on their places with the modal-body being scrollable. I have tried using position:absolute and position:fixed but it does not seem to be working. How can this be done i.e. keep the header and footer fixed with the body scrollable ?
You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to initial.
.modal{
display: block !important; /* I added this to see the modal, you don't need this */
}
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
try with this below css will may help you.
.modal-body {
position: relative;
padding: 15px;
max-height: 600px !important;
overflow-y: scroll;
}
I have a problem with oveflow-x in my page. Althought the body has overflow-x hidden, I can still scroll on the page.
<html>
<body>
<div id="content">
<div id="mydiv"></div>
<div>
</body>
</html>
html and body have overflow-x:hidden.
Div "content" has nothing in the css and div "myDiv" has position absolute.
How can I make the "mydiv" not to go out of the page? Because now what happens is that I can still scroll on x.
Fiddle > http://jsfiddle.net/o7dph6sj
Without more code, the best answer I can think of is that your html and body tags do not have any kind of width set so they are inheriting the default width of 100%. Meaning that every child element is going to be inside of that 100%.
Set the body to have a set width and then set overflow to hidden, then check if the elements in your page are exceeding the width.
Example:
body{
width: 1024px;
overflow-x: hidden;
}
Also, the code that you set inside of #content could directly be affecting it as well, some elements will ignore its parents and be rendered outside of them which brings us back to... give us more code.
Because you're using a bad selector for overflow. If you want to avoid VERTICAL SCROLLING you use this:
html, body {
overflow-y: hidden;
}
to avoid HORIZONTAL SCROLLING:
html, body {
overflow-x: hidden;
}
to avoid BOTH
html, body {
overflow: hidden;
}
take a look to your forked fiddle where I avoid BOTH overflow axises and there's no overflow at all
Change "overflow-x: hidden !important;" to be
html, body {
overflow: hidden !important;
}
or
html, body {
overflow-y: hidden !important;
}
In-fact you can ignore "!important" since you use !important to override other rule. And here you were just using the wrong property "overflow-x" which is for "Horizontal scroll"
And it works!!!
Here is the working Fiddle > http://jsfiddle.net/o7dph6sj/1/
Updated the Answer with addition requirement:
You add "overflow: hidden" when you don't want both scrolls,
AND "overflow-y: hidden;" hides the Horizontal Scroll
AND "overflow-x: hidden;" hides the Vertical Scroll
Checkout the updated Fiddle and try on your by commenting and un-commenting this code:
html, body {
overflow-y: hidden; /* Hides Horizontal Scroll*/
/*overflow-x: hidden;*/ /* Hides Vertical Scroll*/
/*overflow: hidden;*/ /* Hides Both Vertical and Horizontal Scroll*/
}
Updated Fiddle "http://jsfiddle.net/o7dph6sj/3/"
Checkout these articles >
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I tried for several hours and I found that the body size needs to be specified, and its attribute position must be set to absolute. Then you can have overflow-x: hidden work well in your code.
in this case, I have a web with a navbar that I want to slide right to hide from the main body in mobile size. I called #media screen and (max-width:576px) to make it run on mobile size. the problem occurred before I specify the max-width the body must be shown: I still can scroll to the right though I specified the overflow-x: hidden
so I added max-width:100vh inside the body style, and voila. it works!
checkout my code:
body{
min-width: 0px;
max-width: 100vh;
position: absolute;
overflow-x: hidden;
}
nav ul {
position: absolute;
right: 0;
width: 40%;
top: 34px;
height: 100vh;
z-index: 1;
background-color: #194ca7;
}
I want to add these rules in my css
body{
overflow-x:hidden;
overflow-y:hidden;
}
But I want the scrollbar on the y-axis to be visible but should be dissabled.How can this be done?
Edit: Even simpler without a container div.
Try this:
html, body {
width: 100%;
height: 100%;
}
html {
overflow-x: hidden;
overflow-y: scroll;
}
body {
overflow: hidden;
}
Then, if you want the scrollbar enabled, remove overflow: hidden; from the body.
DEMO: http://jsfiddle.net/SKxhP/1/
Set your html height to 101%, this will cause the scrollbar to always show, thus preventing your content from jumping when the scrollbar would normally appear.
html{
height: 101%;
}
See here: http://jsbin.com/ixuhoj/edit
Please correct me if I misinterpreted what you needed.