Ok, I saw several examples of similar issues but didn't seem to answer my specific current issue. All I'm trying to do, is have the side nav use 100% height. I've tried numerous tries with height, float, position, and yet it still seems to only fill the rendered viewport on load. How do I get it to reliably stretch the full height of all content? You'll see what I mean if you just scroll down in the example below.
Example : Codepen
I've tried some things like;
position:absolute;
left:0;top:0;bottom:0;
.
float: left;
.
height: 100%
As I go through the process of kicking the dust off my web skills I occasionally get humbled like this. So if there's an exact duplicate I didn't find just let me know and I'll del this question. Thanks!
Have you tried using a fixed?
I tried it and the nav bar grew.
Or if you could use 200% or 300% might fit what you need
You can use jQuery to get the height of the page, and then set the nav to the height of the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
<script>
$(function(){
var height = $(window).height();
$("#nifty-sidenav").height(height+"px");
});
</script>
give position:relative to the parent
in this case:
body {
position:relative;
}
Related
I am working in Angular Material and I am running into an issue when I use property: fixed. The bottom portion of the div that is fixed gets cutoff when I scroll all the way down to the bottom of the page.
here is the JSFiddle: https://jsfiddle.net/baiin/pp1ak0a7/
I've tried other solutions to fix this like using scrollTop() as an alternative to position: fixed, but it also produces the same bug. I think the solution is to check when I scroll if the bottom of the div is hitting the bottom of the page. However, I am unable to get a proper position for the div when it is being moved. I keep getting the same value. I need to find a way to get the position of this div relative to the entire page.
var offset = $("#scroll").offset();
console.log(offset.top); // doesn't give me relative position, just gives me constant value
Any input would help because I've been struggling with this problem for a while.
You can try this, may be it helps you
$(function() {
var getTop = $('#scroll').offset().top;
log(getTop - $(window).scrollTop());
$(window).scroll(function() {
console.log(getTop - $(window).scrollTop());
});
});
Best of luck :)
Trying to create a menu that is sticked to the top of site whole time.
Followed docs of zurb.foundation, but .sticky behaves always the same unexpected way. Or maybe I don't get some obvious?
Please check for reconstruction here:
http://codepen.io/mister-hansen/pen/wMgrPm
If site is scrolled down, and hit the exactly height of initial viewport, sticky plugin is changing the element .sticky from is-stuck is-at-top to: .is-anchored .is-at-bottom so .sticky disappear.
Thank you.
UPDATE
The first part from documentation: foundation.zurb.com/sites/docs/sticky.html explains the described behaviour. Because of default body { height: 100% } css, the body is interpreted exactly with max. height of viewport.
So in my case solution is a) override height of body with auto. But better b) Just avoid to use the sticky functionality for intended fixed header.
I set the data-check-every plugin option to 0 to recalc every scroll event. Now the viewport's height is calculated again when content is loaded dynamically, such as when infinite scroll is used.
Already a long time ago I started with a new homepage project. I've learnt to build up a homepage on my own, so I'm still in the learning process. Therefore, it might be possible, that I've chosen sometimes not the best way to implement something.
I'd like to have a full width header (and footer) on my webpage. For this reason I created some div tags like this one below:
.header_container_overall-1 {
height: 90px;
width: 1000px;
padding-left: 1000px;
margin-left: -1000px;
padding-right: 1000px;
background-color: #f1f1f1;
}
The problem now is, that a browser (or a mobile device) shows a horizontal scroll bar. I read in a post, that I could use "overflow-x: hidden;". I applied this snippet of code into the "body" class of my css-file. The horizontal scroll bar disappeared, but you can still scroll to the right using the arrow keys on your keyboard.
Unfortunately, I kept programming my website knowing this bug (I thought, that I will fix this later, but I think, this was not the best idea). However, I now came back to this bug and tried to fix it. I found several threads, in which the same problem occured:
kennykee.com/118/div-100-width-without-horizontal-scroll-bar/
stackoverflow.com/questions/18274386/div-overflow-is-hidden-but-still-can-scroll-using-keyboard-right-arrow-key
Then, I tried the following steps:
adding the "overflow-x: hidden;" to several classes (especially the header and footer classes) with the aim to prevent horizontal scrolling. I tried several options and in the end, I got a website, where the header and footer got clipped at the body (for example I got a width of 1000px instead of a full width).
when I tried to use "position: relative;" or "position: fixed;" in different classes, I ended up, that the main page (which is now centered because of margin-left and margin-right set to "auto") was set to the left.
I hope, you understand what I mean. It's hard to describe, even more with my bad English ;-). And as you can see, I sometimes tried stuff without even knowing, what I'm doing. It was more and more "try and error" and I came now to the desicion, that I'm at the end of my html and css knowledge to fix this problem. Maybe you can see the problem right now or maybe you have an idea, what I could try to do.
The website with the described error is available on:
http://www.airlink.ch
The css file is available too:
http://www.airlink.ch/stylesheets/layout.css
If you need any further information, please let me know. And sorry for this long explanation.
Best regards
I did not read the post much further than your CSS. I am sorry but you should not be using hacks like padding 1000 PX and margin 1000px. If you want a full width div, set the HTML and body elements to width: 100%. Then add width 100% to your header/footer div. Make sure to add the meta viewport tag for width = device width. You should do a quick google for some resources regarding device width and responsive design in general.
Hope you can get what you want working!
This might be two questions in one, I'll strat with the actual one.
I want to build a website that is simple and that is mostly out off pictures. Those pictures are set so resize automaticly between 1280px and 640px - that works fine.
BUT now I want to have a div that slides in above each picture once you hover above it.
The sliding in can be archived with css or java that I know, the problem is that the div with the text does not resize as the picture does. In other words putting it to 100% height and 100% width doesn't fix it to the picture size. Is there a way to have it always the same size as the picture below it?!
Right now the height is set to 360px because thats how I left it but here is the link to my testpage so you can take a look at what I mean.
www.panorama-publishing.de/theme-dev
thank you in advance! let me know if you need more detail.
Why don't you resize the div containing the picture and not the other div (call it overlay, if you will). Then you can set the picture to be 100% of the parent div and the overlay can slide from top to bottom and be as big as the entire screen, if you are lazy. As long as you set oveflow: hidden; to the parent element, everything will be just great. This is what I mean:
JSFIDDLE
I've came across this problem when struggling with bigg css libraries and elements that are sometimes hard to style around.
This jQuery solution have helped me where I basicly make the width of an element follow an width of a target element width.
function resize_follower() {
$(".follower").width($(".some-size").width());
}
$(window).resize(function () {
resize_follower();
});
$(document).ready(function () {
resize_follower();
});
Example fiddle here
I know this sounds somewhat counterintuitive, but let me explain what I am trying to do.
I have a large element that serves as the background. It does not resize. It is often larger than the screen it is viewed on. Most of the content of this element (it's just an image) is near the center. Let's say that the only NECESSARY information is in the middle 800px, and the whole thing is 1600px wide.
Why is it wider than necessary? Because it fades pleasingly into the rest of the background and adds to the design of the site.
So I made the element fixed and used a standard trick to center it. It works perfectly on a large monitor. It stays centered, if some of it is a little too big, it doesn't allow you to scroll over in order to see what is basically nothing. I like that.
But if the screen is too small, you can't see it all. You can't just set the min-width or min-height of the page because when you go to scroll, the background image stays in place, because it is fixed.
If there was a way to have a fixed element actually move with everything else when the page is scrolled, that would work perfectly, because I could specify the min-width to the size of the required elements of the image. That would work very well.
Otherwise, another solution would be to use some other form of positioning that allows for the prevention of being able to scroll to see the whole thing. Then, again, I could just set the whole with a minimum width, which would allow me to set exactly how much of the content is scrollable.
Is any of this possible? I feel like I am missing something simple. Ideally I would not have to resize any images, serve up multiple css sheets, or use any elaborate javascript or anything like that. Thanks for the help!
I have finally solved this problem after a ton of experimentation and the solution turned out to be basic CSS, which is awesome.
I go into great detail illustrating this solution at my blog. Alternatively, here is the working demo.
HTML
<body>
<div id="box">
<div id="element"></div>
</div>
</body>
CSS
<style type="text/css">
html, body {
height:100%;
}
body {
margin:0px;
padding:0px;
min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
height:100%;
position:relative; /*This section centers your element*/
left:50%;
margin-left:-800px; /*Half the width of the image*/
z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
background:url(image.jpg) no-repeat;
}
#box {
height:100%;
min-height:700px; /*Set the height you want to be able to scroll to here*/
overflow:hidden; /*Needed due to centering with margins*/
}
</style>
I know you would prefer not to use elaborate javascript.... the JQuery library allows for some great little fixes to things like this with a minimum of code... you could also use a relatively small snippet without jquery... basically all you need to do is set an event listener for window.scroll and set your fixedElement.scrollTop to match...
quick JQuery example:
$(window).scroll(function(){
$('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});
I am not CERTAIN I know exactly what you are wanting to do but the below snippet of css might help you. Not sure.
body{ background-image:url(../images/bgImage.png);
background-attachment:scroll; background-position:center top;
background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}
You can set up your positioning using any combination of the attributes in that snippet and the background-attachment is what makes it scrollable.
It would be helpful if you posted your css for what you have currently so we could really help you. Let me know if I can be more clear.