At my page i have a navigation bar to the left that is 100% height and 25% width.
It is working fine, but when there's scroll available, it destroys the background, and make it look ugly. The reason i think is that 100% height is only applied to the active window.
What is the trick to have a div 100% height always, even if the user is scrolling?
Css of the navigation:
width:25%;
height:100%;
float:left;
color:#999999;
I have tried position:absolute with no results, also tried clear both.
Need help :)
Fiddle
Using min-height: 100% instead of height: 100% should fix it. See updated fiddle here: http://jsfiddle.net/zitrusfrisch/Sa6cb/3/
if you want the element to take 100% of the screen use min-height: 100vh
and if you want it to take 100% of the parent element use min-height: 100%
I would rather use:
height: 100%;
overflow: auto;
I had a similar issue when I wanted to build an opaque overlay on top of a webpage. The overlay only covered the height of the browser window, not the total scrolling height of the page. I turned to Javascript to dynamically get the page height.
$('body').append('<div style="width:100%;height:'+document.documentElement.scrollHeight+'px;background:#000000;opacity:0.5;position: absolute;top: 0;z-index: 1000;"></div>')
Related
To set body-height to 100% I use the following code:
html {height: 100%;}
body{
min-height: 100%;
position: relative;
}
I thought this workaround works always, no matter what the content does, but when I use content, that is absolute positioned, the body seems to loose the 100%-height property.
You can see the example here:
Go to https://www.appfelsine.com/was-kostet-eine-App
Reduce the browser width as far as u can.
scroll down.
there is a white area at the bottom.
Position:fixed; would help for the white area, but then it is impossible to reach the button at the bottom.
position: fixed; and overflow-y:scroll; will result in a double scroll bar - doesn't look very nice.
Have you got an idea how to pull the body down until the bottom?
position: fixed; overflow-y:auto; will prevent scrollbar showing when it is not getting overflow. It prevents double scrollbar issue
Maybe you can just put "background-color: #3ab252" on your ".question-inner" ?
I noticed a behavior that drives me crazy.
I have two divs, that have both similar css:
.one, .two {
position: fixed;
bottom: 6%
}
One div is for navigation, and other is for content, that has max 300px height. The problem is, that if the user resizes the browser window to really small one, the scrollbar is not shown.
I tried to change position to absolute, but then the ajaxify plugin breaks the position if new page is loaded. I couldn't find other ideas, how to position those divs at fixed position at bottom.
p.s. I pasted a sample test on http://pastebin.com/Bp1490dj
the background-green div is at the bottom with position:absolute;
from what I know a position:fixed; and or position:absolute; will never make a scroll. (please correct me if I'm wrong) so a way to go arround this is to set a min-height to body
body {
min-height:200px;
}
have a look at the fiddle http://jsfiddle.net/u2ZWa/
also, there is a fix with a scroll now. But you have to know the fixed elements will never be scrollable because they're fixed
Scrollbars are not compatible with a fixed positioning.
live (work in progress) site
Basically, I have all of my site's content centered within a div that is a specified width and an intended height of 100% regardless of the actual length of the content. I've specified height:100%; for html, body, and #main however the div still comes up short as seen on this page- I don't want their to be any gap between the #main's grey box and the bottom of the screen. Is this possible? How?
see this jsfiddle
html, body {height: 100%;}
.container {min-height: 100%;}
discussing this over here too.....
proper css to ensure that the body element fills the entire screen
You can set position:absolute, and that should stretch it to the bottom. Seems as if that will work fine in Opera and Chrome at least.
That will, however, be in conflict with the video player below, and also push your copyright notice down below the page. Maybe you can move the notice up into the gray box though?
You can achieve by 2 ways:
1) Give Height to 100% if you don't know how long page could be.
html, body {
height: 100%;
}
.yourContainerClass {
min-height: 100%;
}
2) If you know how much you need to stretch vertically then you can use height in "vh(vertical height)".
.yourContainerClass{
height:80vh;
}
I hope it will help you. Thank you!
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.
I want to repeat a background-image for a div vertically till the bottom of the page.
#repeat {
background: url(repeat-image.png) repeat-y;
height: 100%; /* this does not work, but height: 1024px; does */
}
This does not work. I need to do so according to the page design that I have got. Can this be done?
With regards
Vikram
try to set height:100% for your <body> and <html>, too. if there is nothing except this div on your page, 100% height will be 0px without these settings.
For web pages, height is a funny thing. Since web pages expand vertically, the total height of your page can actually be 0. You may consider using min-height for each element that requires at least a certain height. You can use height: 100% to fill the full height of the parent.