I am currently helping a friend with a very simple, responsive 1-page site which can be viewed here.
If you drag your browser window down to about 450px in width or less, you will see that the layout changes which is correct. However, when you drag vertically to make the page shorter, the content in the middle gets hidden/covered.
I need for the text in the middle to always be visible, even if the user needs to scroll/swipe to see it. NOTE: It is the whole body that I would want to scroll, not just the content div.
In this image, you can see that the text is covered if the viewport isn't very tall:
On the div that contains the main content, I have tried setting height and min-height as well as using !important to no avail.
I must be missing something obvious. Any help is appreciated.
Set the div named "content" the style: "overflow-y: scroll;"
<div id="content" style="overflow-y: scroll;">
<!-- content -->
</div>
body {
overflow-y: scroll;
}
Updated to be the whole document.
Related
I'm creating an HTML page which is comprised of two sections; header and body. Rather than use a position:fixed header and allowing the whole page to scroll, I have used a normal header and made the body a scroll container. This is because there are fixed/sticky elements in the body which need to stick to the bottom of the header (and also due to problems with dynamic sizing of the header and body). The problem is that we have various UI elements which appear smooth across the header/body boundary. Our application's layout is responsive to screen size, and now the body may have a scrollbar, but the header doesn't, so they don't quite line up.
I have fixed this problem by having the body elements have a reduced width, and then using a position:absolute background div at the end, to overlap where the scrollbar would go, with the same background colours as the main UI element so they appear to be part of it. This means the header and body would keep a consistent width regardless of scrollbar.
The basic issue with this solution is that when the vertical scrollbar is shown, the browser also shows a horizontal scrollbar so that the user can "see" my placeholder background div, even though it doesn't occupy any of the width. I've tried a few different values for stuff like overflow, etc, but what it really boils down to is that none of them can show the placeholder divs when the scrollbar is not present without making a mess when it is present. There doesn't seem to be a CSS property for when the scrollbar is shown so that you can change the CSS as needed.
I've looked at e.g. scrollbar-gutter but we can't really use this as we need to continue supporting Chromium 88 as well as Firefox, iOS Safari, and similar. overflow:overlay would be ideal but isn't a well supported feature.
Some have suggested a mix of position:relative and position:fixed, but if I apply the right styles to get the element into the right place when there is no scrollbar, then it still causes the same issue when there is one.
Please see the following snippet (I tried the inbuilt one but it doesn't seem to work super well with content that requires scrollbars and such). I've created simple fixed-height divs to demonstrate the different content that I'm dealing with right now. The blue boxes should appear to go all the way across but don't need interaction right on that last bit. The red and green boxes should always line up, even though their layout is width-dependent and only the bottom section of the page scrolls if you shrink it down. These goals are achieved but when you shrink the page so that the vertical scrollbar is needed, the horizontal scrollbar also appears.
<html>
<head></head>
<body style="height:100vh;display:flex;flex-direction:column;margin:0">
<div style="height:200px;flex-shrink:0; max-width:calc(100vw - 17px)">
<div style="height:100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
<div style="height:100px;background:red;margin-left:200px; width:50%"></div>
</div>
<div style="flex-grow: 1; overflow: auto;">
<div style="max-width:calc(100vw - 17px)">
<div style="height: 100px;background:green;margin-left:200px; width:50%"></div>
<div style="height: 100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
</div>
</div>
</body>
</html>
Always i try to not ask about my problems, google about it etc. But now i have big problem with my code. I have http://html.bpcoders.pl/4hero/ left sidebar always visible, there is fixed position but content is bigger than height of sidebar and part of content is outside screen.
I dont have any ideas how i can do it for good utility. Did You have ANY ideas about it? Sorry for my englisj is not my first language .
Add a scroll to your side bar by doing the following:
on you element, add the css overflow-y : scroll;
so your element head would look as follows:
<aside style="overflow-y : scroll">
I've created a website with a content-width of 800px.
However, when my user uploads a picture with a width of 900px, the site is totally out of order.
Is there a way to add a slider or scrollbar instead of the div getting bigger, when the images are too large for the website? If not, I think I have to resize the uploaded images..
Thanks in advance.
put style="overflow:auto;" on your div then it will produce a scroll bar when image is larger than your space
I assume that because you're talking about width, that you're wanting the content width to maintain at 800px and then default to scroll if content (in this case an image) is > 800px.
Perhaps you could take advantage of the overflow-x: scroll; property in CSS to only scroll horizontally. overflow: auto; may add the vertical scroll as well when not required.
You may need to supply a little bit of the code that you are using so we can figure out the problem, but what you could use is:
overflow: hidden;
That will stop anything being wider than your 800px content container.
I am using a facebook like button on my web page. I need it to align at the right side of the page. But there is a horizontal scroll bar displaying.
Please see the fiddle http://jsfiddle.net/u4kMs/
I couldn't find out what causes this. How to fix this?
to disable scroll, try something like;
.your_div_class{
overflow-x: hidden;
overflow-y: scroll;
}
The scrollbar appears because the content is too wide for your screen.
Just omit the width on the div element, it will auto-expand to 100% of it's parent. Floating the facebook button to the right like you already did should then align the button correctly without scrollbar.
If you don't get a satisfying solution you can still declare overflow:hidden on the containing div to supress the scrollbars.
This would be the result: http://jsfiddle.net/poikl/u4kMs/8/
It's because the frame is too small for the width that you have set on the top div
<div style="margin-left:auto; margin-right:auto; width:980px;">
So when this is on your web page yo shouldn't get the horizontal scroller. If you do, then consider changing the above width
Try this and remember to put the "right-aligned" div before the left-aligned div, even the right div have to be "after" graphically speaking.
rtl has a problem most times, (with me special with
<body dir="{{(App::isLocale('ar') ? 'rtl' : 'ltr')}}">
in laravel and the only solution is
body{ overflow-x: hidden; } but be careful with inside element is fitted well
I created an html page for facebook it's height is 650px and turned off Auto Scroll but it shows vertical scroll bar.
Just because the content fits within the standard canvas height doesn't necessarily mean that the scrollbars won't appear. The scrollbar will also appear if the width overflows the canvas (520px).
The following doesn't apply in your case but based on your title others may find it useful. The fan page canvas height can be changed by using the JavaScript SDK -- specifically FB.Canvas.setAutoGrow or FB.Canvas.setSize.
Add a selector too the fan page div.
<div id="myfanpage">
</div>
then add this css to your stylesheet:
#myfanpage{
margin:0;
padding:0;
overflow:hidden;
height:650px;
}
That will completely disable scrollbars and make your div exactly 650px in height!