My page is 1920px width, and for some unknown to me reason, my scrollbar wants to scroll page into the right, where there is empty space only. I tried specifying <html style="width: 1920px;"> but that does nothing, bottom scrollbar just scrolls like the page was 2100px... Is there anything I can do about it? Like, specifying fixed horizontal overflow?
Edit: Here is the link to the page: look only at homepage, because on the other pages it looks ok: http://scyk.pl
You have a problem in the buttons bar you have to look in your code for :
<div class="frontPageButtons">
the position of the div is relative and you set left to 30% :
.frontPageButtons {
left: 30%;
position: relative;
}
You most likely have a child element that is pushing the containing block wider. Overflow hidden will work, but generally it is better to avoid setting fixed widths for child elements unless you are defining a new layout context.
try to set min-height:500px; in css
happy coding...
Related
Here's the codesandbox, as the code is too much to post here, given the nested elements.
I'd like to have:
a horizontal scroll for the .content div.
a vertical scroll just for the .group-body div.
I've tried everything and I can't get it to work.
This rule does make it "work", but I feel like it's not optimal.
.body{
height: 90vh;
}
You just need to specify max-height for .group-body and then overflow-y will work as expected.
See this fix in your code
This should solve your problem - https://codesandbox.io/s/divine-dawn-1n8b1.
It uses a flexbox instead of grid layout.
Note: The code in the link was fixed after a comment pointed out an issue. To fix the scrolling, I set the parent elements that contain the sidebar and the content to overflow:hidden, and set the parent element to overflow:auto, which allowed for the scroll bars to be contained in the content div.
I have a small web app I'm designing and I have a real weird problem. The inner content will always cut out below the page fold - you can't scroll down to read all of the text. I've tried this in Mobile Safari and on my desktop in Chrome/Firefox with no success.
The live URL is http://byjakewithlove.com/code/mobile-webapp/
Any suggestions I could try would help a lot. I basically have div with the ID #content and that holds the white BG and page text. I've got overflow: auto; which should create the scrollbar inside this div, and even have height: 100%;. I'm totally perplexed about what the issue is - again thanks in advance for any help!
you can keep the height: 100% on the content element, but position the header element using absolute positioning (don't forget to set their parent's position to relative, of course) to stick it to the top, while setting a padding value to the content element that correlates with the header's height.
the height: 100% is misused - "100%" refers to the container's height, so it's calculated for the parent, thus resulting this behavior.
simply omit the height: 100% declaration and set a fixed height.
Whenever my website is viewed with a resolution that is insufficient to display the full page, a horizontal scrollbar is added. The problem is that my 100% width div with background image does not apply this background image to the portion that extends beyond the scroll bar.
This same issue is actually appears here on Stack Overflow as well. If you shrink your window small enough that you have a horizontal scrollbar, you can see that both the header and footer div areas do not extend the background image/color.
One way I have figured to resolve this is to set the header/footer div to fixed but then the content past the end of the div is lost :-(
Anyone have any suggestions or a workaround? ty!
When you set an element to 100% width it will have the same width as its parent element. The body tag's width defaults to the width of the viewport. According to the standard, when an elements contents is to big to fit in it, it will overflow. This is what you're seeing.
To get around this, set the min-width on the body tag. Something like the following, obviously change the width to whatever works for you:
body {
min-width: 960px;
}
Surly if you used something along the lines of
body{
background: url("yourdir/yourimage.jpg") repeat repeat;
}
Instead of having a background div? It'd be helpful if you also added the code for the background div
This margin is a browser scrollbar that appears during resizing and makes viewport smaller. This can be easily fixed by adding hidden overflow to body. Check #242684
In my CSS file I use this:
html,body{height:100%;padding:0;margin:0;border:0;}
Which causes a vertical scrollbar to appear on IE8, Chrome 5 and Mozilla 3.6, all latest version.
Also, the document is empty, it only has the html, head and body tags so nothing is going out of screen to cause that.
Setting overflow:hidden; on the html element will completly stop scrolling on the page.
How can I make it go away please but also keep scrolling when content is higher than display height?
Thank you.
I need 100% height in a XHTML document so that I can have div elements with 100%.
Anyway, I found the answer:
This problem only occurs when the top most element has a top margin.
It seems that that top margin gets added to the 100% height making it higher and causing the scrollbar.
So either use padding-top to space the top most element or use a with no top margin between the tag and the next element with a top margin.
overflow:hidden should help and prevent the display of scroll bars (you'll likely lose ~1px of content due to rounding errors
There may be better ways but I simply default to 98% which seems to obviate scrollbars in all browsers.
you could also set the height using JavaScript but that feels a little hacky
I ran into this issue today and found the scroll bar wasn't caused by a top margin on the first element, but by having BOTH the html and body elements have a height of 100%.
So, using this CSS rule:
html,body { height: 100%; }
I get scroll bars. If I change that to this CSS rule:
html { height: 100%; }
I get no scroll bars.
Peace...
The vertical scrollbar is coming because of height:100%. You don't need that unless there is a reason for you to use that.
Why are you setting 100% height in body?
It will get this height by default.
It makes sense to set height in body only if you want to set a numeric height in px such as lets say 600px
I have a page with two divs on it which should fill the entire screen.
Both of them have width = 100%
The upper one's height should be defined by its content (the minimal possible height that fits all content) and never show any scrollbars.
The lower one should fill the rest of the screen. However, if its content does not fit the div, it should display the vertical scrollbar.
Like this:
<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>
How do I do it with CSS?
Update:
I'm looking for a solution that would not require me to set the fixed height for the upper div.
Is that possible?
this should fix your problem
#header{ overflow: hidden }
#content{ overflow-y: auto }
edit: you have to define the height of the divs aswell
In order to do it with CSS you need to define a height on the bottom div, and then add overflow:auto.
.content {
height:90%;
overflow:auto;
}
Unfortunately, this means that your top div will need a height defined as well, because content will have to take up a predefined amount of space on the page. If you use percentages for height, then you will need to define a height for your header div so stretching and shrinking the browser window doesn't cause issues.
The only way I can see you achieving this is through Javascript. I know you didn't tag/ask for JS but I can't think of a straightforward, elegant CSS solution.
With JS you could capture the onpropertychange event of the header div, check to see if the property changed was offsetHeight/clientHeight and adjust the top style property of the content div. The content div would also need to have position:absolute; and bottom:0px;.
Sorry if you're not interested in a JS solution, I just don't think there is a CSS one without accepting a user experience below what you're trying to achieve.
You should define fixed width for second div and use overflow css property to define scrollbars.