I am using the following bits of code to keep my menu items fixed while allowing for the scrolling of content because it seems to be the most stable method across all browsers.
body { overflow: hidden; }
div.content { height: 100%; overflow: auto; }
My problem is simple, and yet I can not seem to figure it out, the content inside the tag butts up against the scrollbar for the div area and it makes reading much more difficult. How can I get a margin between them (apart from floating a transparent image to the right to create space, there HAS to be a better way)?
div.content { height: 100%; overflow: auto; margin:0 15px }
I might have misunderstood you though, post some HTML if I have.
Related
So I was working on a website when I came across the problem of my footer not staying at the bottom of my container div (the footer was not inside of the container, it was placed after it in the HTML). I realized this was because some of the child divs were floated, so I had to put overflow:auto on the container--HOWEVER, because I needed the children to have percentage heights, I had the height at 100%, and as you probably know overflow:auto + specified height = scrollbar. But having just a min-height wouldn't allow the child divs to get their height. Having both certainly doesn't work.
I recreated the problem in some separate testing files, getting rid of all the unnecessary CSS (although I'm sure some still remains) so I could visualize the problem without clutter. It's on this JSFiddle currently. I have the height commented out currently, because ideally I won't be using it.
Here's my container div CSS:
#container {
position: relative;
width: 70%;
/*height:100%;*/
min-height: 100%;
overflow: auto;
margin: 0 auto;
background-color:#FFDA8A;
}
And one of the child divs that needs a percentage height:
.featured {
position: relative;
width: 100%;
height: 50%;
background-color:red;
}
EDIT: I want to add that I know why this is happening, rather that I was wondering if anybody has stumbled upon a CSS-only way of dealing with it. If it can't be percentages, then I'll look into flex-boxes instead (as mentioned by PiniH, thanks!).
It's an old question, with no really good answer, usually when stuff get like this, you should use flex boxes in the end, the min-height property will not affect the children, unless it's a table, and then it gets a mess.
You can add:
#container {
position: relative;
width: 70%;
/*height:100%;*/
min-height: 100%;
height: 1px;
overflow: auto;
margin: 0 auto;
background-color:#FFDA8A;
}
But then it won't grow which I guess is why you used min-height in the first place.
I have been boggling my mind around this for a while, eventually I think flex is the only answer in this case.
This div below is causing the page to scroll horizontally on smaller then 1450px browsers. I thought overflow would fix this issue, but does not appear to... may be something I need to do on the parent div's. Any ideas?
http://barr-display.mybigcommerce.com/
#Header {
position: relative;
clear: both;
width: 1450px;
min-height: 190px;
overflow: hidden;
background: url('/content/headerbg3.jpg') repeat-x;
}
On body you need the following
body {
width:100%;
overflow:hidden;
}
The reason your code is not working is that you're setting overflow on the child(#header) when it needs to be set on the parent.
Looks like you want three things:
No scrollbar when header image is cut off.
YES to scrollbars when main page content is cut off.
Ability for your header background to extend to the right if the browser window is wide.
You really needed to post more of the relevant code here. However, I look at your site, and this'll fix it:
Change your rule for #outer:
#Outer {
clear: both;
margin: 0 auto;
min-height: 190px;
width: 1024px;
}
Remove the margin and width rules from #outer's parent, and replace with width:100%;overflow-x:hidden;
Add these lines to your css:
html, body {
width:100%;
}
body {
overflow-x:hidden;
}
You need overflow-x so the vertical scroll bar doesn't disappear.
Also, remove overflow: hidden; from the #Header.
I have the following:
XHTML:
<div id="container">
// contents
</div>
CSS:
#container { margin: 0 auto; width: 940px; overflow: hidden; padding: 10px; border: 1px solid #CCCCCC; }
The div is centered on the page with margin: 0 auto and I use overflow: hidden to allow the DIV to automatically expand down to the height of its contents.
I have some content in the DIV which has a box-shadow on it. The problem is due to the overflow: hidden rule the shadow does not fully appear on the page. The only ways around this I have found:
Take out overflow: hidden - but then the container DIV doesn't expand down.
Use height / min-height on #container - however this wont work well with all pages on the site.
Use float: left - but then the DIV isn't centered on the page.
Anybody got any more suggestions for this?
You can use one of the many clearfix techniques. That will let you remove overflow:hidden and fix the cropped box-shadow.
Here's a recent article on the topic: http://css-tricks.com/snippets/css/clear-fix/
Pretty sure some margin on the div would solve it, but if you show some more code it's easier to check.
http://zergxost.com/test.html
As you can see, if there's not enough text, the bottom gray line goes way higher than it should. Can someone please explain why doesn't "article"'s hitbox include the "header"? And how ti fix it? Thanks.
You're missing a either a overflow: hidden or a clear: left declaration. You should always clear floating objects or declare overflow to be hidden (carefully!).
article {
overflow: hidden;
}
Or:
div#wrapper div.related {
width: 100%;
height: 960px;
border-top: 1px solid #808080;
margin-top: 20px;
clear: left;
}
Why/how overflow: hidden works
When you set a block-level element to have overflow: hidden, you're actually telling the browser change how it handles block elements. Functionally, you told the browser to contain normal elements (including floated ones). Things that will exceed the total dimensions of the box, usually by relative/absolute positioning, or images with huge widths, will get clipped to the wrapper's width. Drop down regions that cross over a container with overflow: hidden may cause them to get clipped as they enter as well.
Elements at the end of a overflow: hidden container will also have padding-bottom and margin-bottom applied.
Another answer: https://stackoverflow.com/a/3416217/24950
You need to clear div#wrapper div.related. Try adding the following to your CSS:
div#wrapper div.related {
clear: both;
}
on my website it is a div based layout when the window is reszied everything is pushed together. Such as images overlap or are moved below each other and divs also overlap each other.
How can I get it to scroll when the content of the div is greater than the window size, similar to facebook if you resize the window it prevents anything overlappting and just makes the user scroll?
body
{
background-color: #B0B0B0;
color: #ffffff;
margin-top: 0px;
margin: 0px;
}
#header
{
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
}
#content
{
width: 80%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding: 30px;
}
<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>
The html is like that but obviously with more content
Hope I haven't made this too confusing, thanks.
Just add overflow:auto; to your div.
You can also use the following if you only want x or y scrolling
overflow-x:auto;
or
overflow-y:auto;
use the overflow:scroll; to enable scrolling in the DIVs
You must add white-space:nowrap; to your body tag.
I believe you may want overflow: auto;
Here's a comparison between auto and scroll.
add the style
overflow: scroll;
to #content
This answer is pretty late, however I stumbled across this question, as I was having issues on one of my pages, where I have this Page with 30 odd inputs of various types, that are split between two tables. I was unable to scroll to see about 10 or so inputs at the bottom of the page, and could not even scroll left to right when adjusting the browsers width.
What solved my issue was:
html, body {
overflow: visible;
}
This activated my X and Y scroll bar.
I had an issue with my footer not adjusting when scrolling, it instead would just stay fixed where it was situated before scrolling. this was due to my master CSS having the footer's position set as absolute. Simple fix, just creating a new style element in the page and added
footer {
position: fixed;
min-width: 100%;
}
I hope this helps anyone looking for a solution.
As stated by user3726345 , the best option to use is the
html,body {
overflow: visible;
}
using
overflow: auto;
dosnt give the best output. then you can further adjust your footer codes to your taste.