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%;
Related
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
I actually solved this issue for myself but was wondering if anyone could explain why my fix works. I was styling a popup modal on a mobile site using the MoovWeb SDK and sass. The modal consists of a mask div, which is located immediately inside a container div, and the modal div itself, which was buried more deeply in the DOM.
mask styling:
#modalMask{
opacity: .8;
position: absolute;
display:none;
height:100%;
width: 100%;
z-index:9990;
}
modal styling:
.mw-popup-modal {
top: 80px !important;
left: 0 !important;
position:fixed;
z-index:9999;
display:none;
}
This resulted in the mask sitting on top of the modal and the buttons inside the modal being un-tappable - their tap area was actually located around 3cm below where the button was appearing onscreen on the phone. However, on the desktop version of the site, this styling looked fine.
When I changed the positioning of the modal from "fixed" to "absolute" this fixed the problem, but I'd like to understand why. Do fixed- and absolute-positioned elements each work on their own z-index stack?
Official W3 documentation states
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images.
Absolute and Fixed positioning do not work on their own z-index stack context.
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.
Right now I have a floating box on the left side of my site that holds a stumble, facebook, twitter share code.
#fixmetoo {
position: absolute;
right: 30px;
top: 0px;
}
#fixme { position: fixed; }
It stays put as you scroll but i want it to disappear if the footer is showing.
I have a page that is 960 px wide and the floating box shows great but the footer is 100% wide and the box covers the footer.
so if my footer is 300px tall how can i hide the floating box IF i am less than 300 px from the bottom of the page?
Note that the z-index solution is probably what you want, but it will only work if the footer is a sibling element of the fixed-position panel (not exactly... just has to be in the same 'stacking context').
You probably however want to make the footer {position:relative; z-index:2;}, unless it is already absolutely positioned.
If you dislike the panel going behind the footer, the only sane way you can get the panel to stop scrolling before the footer is with javascript.
Try using the z-index property.
#footer{ position:absolute; z-index:2; }
#fixme{ z-index:1; }
Please post more of your code. Or use http://jsfiddle.net