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.
Related
I have a site based on foundation 5 & angularjs with the following layout:
header
-left-nav
--content
footer
Currently the left nav is absolute positioned to the left with an initial height of 100% (top:0, bottom:0)
The content div changes in height as to what is being loaded into it (via ajax). I'm manually adjusting the height of the left-nav div when the content height changes, but I was wondering if there was a way with html/css that would enable me to get rid of this script.
I've tried using all the techniques i've found through googling, but none seem to work without the javascript.. I need the left nav to always been 100% of the page height as it has a dark background that stretches to the bottom of the page.
Many thanks,
Ben
Update
Its working in this jsfiddle.net
This FIDDLE has an "add content" button which will show you it working with dynamic data.
I just changed this ...
.small-fixed-130-left.column {
position:absolute;
width:11.4285714286rem;
top:0;
left:0;
bottom: 0;
}
You could position: fixed; the left nav with a height: 100%;
On my site, I want to have a 'div' at the bottom of the page. It has no fixed height, but should always start '200px' from the top of the page.
The problem I am having is that when the content of the 'div' is very long, it's background doesn't expand when you scroll down.
Here is my code: JSFiddle (updated)
I have tried working with height=auto and border=auto, but then the 'div' doesn't stretch to the page bottom when there is less content and you don't have to scroll down.
Update:
Sorry for miss expressing my problem: I need the 'div' to have position: relative because I need it to be positioned in the center of the page with left=10% and right=10%.
I also updated the JSFiddle.
Update 2:
I guess there is no perfect solution to this problem. What I will end up doing: Having two 'divs'. The first div will have the page content on it and will not show the background when there is less content; the other div will be behind the content-div and won't scroll at all, but it will show the background for the div in front when there is less content.
I've changed some 'design' from your original to be able to satisfy your requirement.
First, here's my jsfiddle
#top {
height:200px;
background:#FFF;
}
body {
background:red;
margin:0;
padding:0;
}
What I've done is I've set the whole page background to red. Made the #top height 200px with white background, so the #bottom would be 200px apart from the top. Now the trick I've done is, the #bottom is actually isn't touching the bottom if it has less content, but what you see is the illusion from the body's background and #bottom's no background.
Change it to position relative will work in your example fiddle.
add height: auto; to your div's css
EDIT:
and remove bottom: 0;
I have a div that I wish to position at the bottom of the webpage. I can achieve this using position:absolute. However, I don't want it to overlap the div above when the window is made smaller. This was achieved by changing it to position:relative however as expected it does not stay on the bottom of the page on bigger screens.
Is there a way in which this is possible?
Current CSS
position:relative;
bottom:0;
background-image:url('.......');
background-repeat:repeat-x;
background-position:bottom;
width:100%;
An example of what I was explaining.
As for me, the best idea is through creating a container DIV for all page content (stretch it to fit all screen using popular practices). Then you can put your footer to the bottom of this container by setting position: absolute and bottom: 0, and don't forget to set padding-bottom: height of your footer to the container. This will prevent overlapping your footer by content of the page.
Try giving min-height to DIV above footer DIV.
When the window becomes smaller, use media queries for that particular resolution or a resolution lesser than that and apply a display:none; to that div with the class that has a position absolute, if you do not want it to display or z-index:0; or z-index:-1; if you want to show it below the contents div.
Hope this helps.
You could set a margin-bottom of the height of the absolute element on the upper div. This way, your absolute positioned element will overflow with the margin instead of the element itself.
The way I see it, you should revert back to position: absolute, then try giving it a low z-index value, such as z-index: -1
I have some text that I display in a div with the following CSS:
.fixed-box {
position:fixed;
top:10px;
width: 270px;
}
This is so that when I scroll it always shows on the top of the screen. However when there is a lot of text the div gets cut off, because the position:fixed prevents it from scrolling down with the page it's on.
I was going to switch to an iframe, but is this really the best way to go?
Add overflow:auto; and set height property either to 100% or manually.
Here is code example http://jsfiddle.net/7ZVb8/
i have a problem with the entire content of my page.
The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts to the left.
I have to compensate for this for an absolute postioned div by positioning it over the content by 20px until a scrollbar is present as it rests at the right hand side of the page.
This is a crappy fault on my behalf but i just want an easy way to fix this. Any quick and easy suggestions? Would i be better off making the main content div an absolute one?
One quick and dirty way is to always force the scrollbar to be visible with:
html { overflow-y: scroll; }
Not ideal, but it standardizes the appearance if the lack of scrollbar offset is breaking your design.
If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.
Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.
<div class="wrapper">
your content goes here
<div class="absoluteDiv"></div>
</div>
.wrapper { position: relative; }
.absoluteDiv { position: absolute; }
I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.
AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.