Here is the image of my current page: image
As you can see there's a scrollbar and I want to disable it but not by set overflow to hidden and something like that.
I want to disable it by resizing elements on the page.
Can anybody help me?
The code below can make your scrollbar invisible but still work:
.class-of-your-container::-webkit-scrollbar {
width: 0px !important;
height: 0px !important;
}
2.If you mean disable the scroll behavior,then you should make sure your document content's height won't exeed the window's height.It is hard because the users screen's height is not the same.To acheive this,you can add height:100% to your container element.
Related
How do I make my div’s scrollbar always visible?
.el {
height: 100px;
overflow: scroll;
position: relative;
}
overflow: scroll is not working. It seems my browser’s native behavior does not allow that. (I’m on macOS.)
Is there some workaround?
P.S. The scroll bar is visible on hover, but I need it to always be visible.
It's a browser issue, the browser have there own style for these elements.
If scrollbar go to hidden, it's for the user comfort, you can't change this...
So you can try to make div scrollable with custom scrollbar plugin in jQuery for example :
https://github.com/gromo/jquery.scrollbar
This plugin create fake scrollbars in javascript and permit to user to scroll into element. So browser don't apply his own rules for these scrollbar because they aren't.
You could try
html {
height: 101%;
}
I'm trying to show the original size of the image. Often that's bigger than the width of the div that's containing it.
In modern browsers, it gets automatically resized to fit the parent div. Even when I use overflow: auto the image still gets resized.
So how can I prevent the image from getting resized when the outer div has a set width?
Thank you!
Bootstrap have maximum width set to 100% on images. Change it:
img {
max-width: none;
}
I used this one img {min-width:100%}
When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.
I was sure I'd find a similar question on here but can't seem to word it correctly enough to find it in search.
If someone could point me in the right direction I'm sure I can figure this out.
Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.
screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg
You need to add a min-width:1000px to .footer-container.
.footer-container {
float: left;
line-height: 1.5;
margin-top: 20px;
width: 100%;
min-width: 1000px; /* add this */
}
This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.
If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.
I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.
I have a weird problem. The background image (black stripes) in the main container breaks up when the browser window is resized smaller and the user/viewer scrolls up and down (in Safari). The stripes stop stretching down 100%.
#mother {width: 100%; min-height: 100%;height: auto !important; height: 100%; margin: 0 auto; background: url('/img/bg.png') repeat-y center;}
link text
The way to change this horizontally is to set a min-width declaration on the div. Mid-width 100% doesn't work, you need a pixel value.
I don't seem able to duplicate your problem in Safari (or any other browser) vertically - the stripes don't reach the bottom of the page even on first load.
Quite Tricky :)
body { display: table; width:100%}
I'm not aware of a way of directly changing this behaviour myself. Firefox is the same, I think, at least horizontally.
Does it make any difference if you apply the background image to an element that contains #mother? Depending on your page, perhaps you could apply it to the body.
Ok so I have a div that contains a few forms that have dynamically generated content. There are categories, that if you click on, slide/toggle down to reveal that categories sub-contents, or projects. Right now, I have it setup so that if the height of the div expands to exceed a set amount, a scroll bar shows up at the side, and the user can scroll down and see the content.
NOW I am being asked to get rid of the scroll bar, and just have the div's border (which is just 1px set in the css) height adjust dynamically with the height of the div's content...can I even do that? Is there some sort of jquery animation that would allow that? A point in the right direction would be greatly appreciated!! Thanks
You now probably have a height set on the container div:
#container {
height: xxpx;
overflow: scroll;
}
Just change that to a min-height:
#container {
min-height: xxpx;
overflow: visible;
}
The div will be at least xx pixels, and grow to fit after that.