I'm making a website with a number of "floating" images one each side of the screen. Pages range in height between about 900-3000 pixels, so I've created floating images to cover this area.
The problem is, that even if a page is only 900 pixels high, the page will see the floating images as objects on the page and make scrolling to them possible.. making the page much longer than needed.
From what I could gather on StackOverflow. Absolute elements shouldn't count into the flow of the document, but clearly these are. I've also seen answers involving usage of overflow:hidden, but this doesn't seem to have the desired effect at all.
Maybe the only way would be to create the images depending on the page height using javascript?
here is the WIP of the site in question: http://apa.smars.se
If you want a CSS only solution here is what you should do:
Add position:relative; and margin:0 to the <body> element.
Add next element as a first element in your <body>:
<div style="position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;">
Move the <div class="botleft ..."> and <div class="botright ..."> elements to that div.
By applying position:relative to the <body> element and adding to it another element with position:absolute; left:0; top:0; width:100%; height:100% you are telling that element to "track" the size of the <body> element. And by adding overflow:hidden; hides the bottom-overflowed images.
The downside in this solution is that you may see cut images at the bottom of the page. Well, nothing is perfect :)
Here is how your DOM tree should look like after this change
To see the results immediately you can run following code from browser's console:
d = document.createElement("div");
d.style.cssText = "position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;";
document.body.insertBefore(d, document.body.firstChild);
d.appendChild(document.getElementsByClassName("botleft")[0]);
d.appendChild(document.getElementsByClassName("botright")[0]);
document.body.style.position = "relative";
document.body.style.margin = "0";
When you give an absolute position to an element it becomes absolute related to the first relative element that contains the absolute element.
And because the default position for elements is static, you may have to change it for the container element (maybe the body in your case).
Good luck!
Related
I have an Angular project in which I have some components that run inside of other components, what I'm trying to do is to create a popup component which will have the same size and placement regardless of from where it is triggered.
I got the suggestion to use Bootstrap modals instead, but ran into this problem trying to implement it in Angular. While that problem may be solved, the question of problem of a div breaking out of its containing div still stands.
I've been searching different ways of doing this but haven't found any solutions that I could apply when the exact page position isn't known.
What I want is a div that has the attributes of a div placed with absolute position right in the html, an example of what I mean:
<html>
<body>
<div class="absolute_div" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
</div>
<div class="some_content" style="position: relative; height: xx; width: xx">
<div class="target_div_to_break_out" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
</div>
</div>
</body>
</html>
I want the containing div target_div_to_break_out to have the same properties of the absolute_div but am unable to figure out how to achieve that.
In the actual use case there are <app-popup></app-popup> tags inside of another dive that i desperately want to break out and be treated as outside the containing div.
Since I'm using Angular for this a solution using Typescript/javascript is more than welcome if it isn't easily achieved in CSS.
Basically I want a containing div to cover 80% of the entire page, regardless of where inside of other divs it is placed.
Instead of using absolute positioning (which will position it relative to it's first positioned ancestor, i.e. .some-content), you should use fixed positioning, which will position it relative to the entire viewport.
More info on CSS positions can be found here
Is there a way using css and html to control the maximum scrollable height of a page, regardless of the content which is present on the page?
For a concrete, hypothetical example: say the <body> is incredibly simple - a <div> which is 5000px tall. How would you set the scrollable height to be only 2000px?
Thus it would appear that the 2000th pixel is the last pixel on the page. The browser's scroll bar would appear to be at the bottom, not just "stuck" halfway down the page. Am I missing something simple to achieve this behavior? I would prefer pure css/html because it seems like it should be doable, but I would accept js.
You can do something like this
HTML
<div class="outer">
<div class="inner">
<!--your content here-->
</div>
</div>
CSS
.outer {
height:2000px;
overflow:auto;
}
.inner {
height:5000px;
overflow:hidden;
}
You should set the body height to a specific number and set overflow to hidden.
body{
height:2000px;
overflow:hidden;
}
Made an example here
Use max-height or height css properties and overflow:hidden on your container element. It will hide everything that is greater than the height you specify, therefore limiting the scrollbar height.
I should also mention that you can use overflow-y:hidden will achieve the same thing, but will only affect top and bottom edges of an element. See more details here.
I read some online articles and they say that html tag represent the browser window, so html is equals to the browser window size. If the body size is greater than the html size, then the scrollbar will show up. So it is the html element that controls to display the scrollbar or not.
It's like in this picture:
You may think of it like:
html { overflow: auto; }
So if want to hide the scroll bar on purpose, I would do:
// myCSS.css
html { overflow: hidden;// override default }
If I want to scroll to a position of the body:
var position = 500;
$('html').animate({scrollTop: position}, 1000);
This sounds all promising. But I used FireBug to check the height of the html tag, they are always greater or equal than the size of body. (Assuming a default webpage with no css, and contents in body exceed window size) The html tag size is not really the size of the browser window, and it is more of the size of body element.
So where does the scrollbar really come from? How does the scrollbar really work?
I read some online articles and they say that html tag represent the
browser window, so html is equals to the browser window size. If the
body size is greater than the html size, then the scrollbar will show
up. So it is the html element that controls to display the scrollbar
or not.
That's very wrong indeed.¹
What the CSS 2.1 Spec section 9.1.1 says is
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
Yet that doesn't seem quite correct either, since a scroll is not generally provided to move the viewport over areas of the canvas that have a negative x or negative y value, even if content is painted there.
The best I can establish is that the scroll bars are made available to move the viewport over the areas of the canvas which have a rendered box for 0 or positive x and y co-ordinates.
Whatever, neither the size of the html element box, nor the body element box are special. They are just rendered boxes on the canvas, the same as other elements. Other elements may be rendered outside those boxes, because of overflow or absolute positioning and the scroll mechanism will take the full size of those elements into account.
An example and diagram may help understanding. Consider this example:
<!DOCTYPE html>
<html>
<head>
<title>Scroll limits</title>
<style>
html { padding:20px; border:1px green solid; height:80px; }
body { margin:0; border:1px black solid; height:150px; }
#div1 { position:absolute; top:-50px; height:65px; left:-50px;
width: 65px; background-color:blue; }
#div2 { position:absolute; top:200px; height:65px; left: 110%;
width: 65px; background-color:yellow; }
</style>
</head>
<body>
body
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</body>
</html>
JsFiddle
results in this:
¹ The online article probably, and the picture in the question definitely, come from http://phrogz.net/css/htmlvsbody.html. It should be noted that that article was written in 2004. In 2004, what the then draft CSS 2.1 said didn't really matter. What mattered was what IE6 did, and the article does describe what IE6 did.
This works:
html {
height:100%;
width:100%;
overflow: hidden;
}
Scrolling has to do with overflow. When the body overflows the document.documentElement (the html element) the scollbar/bars appear. While other Elements' overflow defaults to visible the html tag defaults to scroll. To answer your question, the scrollbar appears on the parent of the overflowing content, when the parent's overflow is set to scroll, in this case the html tag.
I was having this problem with margin-top in all browsers but IE/OPera, I set a div's margin-top on -800px and if I trace the div position in IE is -800px as the same is in Opera, but in FF/Chrome it adds 300px, so it says that the Div is at -1100px in the margin-top.
I've seen that the best practice is use padding instead of margins, but I'm pretty new on the whole concept. By now I can't see from where comes this 300 extra px. I actually put this div at the beginnig of my html and in the end of the html, right below of the opening body tag (As it is right now) and right at the botton just above the closing body tag, both with the same result of extra pixels.
You can see the problem here: http://www.kassandrafoto.com/ if you click on Kassandra Cruz at the main menu at the top you will see the extra margin or the 300 px gap, I want the design as in FireFox or Chrome, but in this case is weird that IE is working as I want to do it: margin-top is -800 and not -1100 (The animation is right because I play with this difference, but my problem here is ¿where those 300 px come from?.
This is the CSS of the div in question:
#kassaInfo{
width:745px;
height:671px;
color:#74CCE5;
position:absolute;
margin:0px;
z-index:1000;
left:50%;
margin-top:-800px;
background-image:url(http://www.kassandrafoto.com/images/kassaInfo.png);
background-repeat:no-repeat;
}
body{
margin:0;
width:100%;
height:100%;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
background-image:url(http://www.kassandrafoto.com/images/bg.jpg);
background-repeat:repeat-x;
overflow:hidden;
}
This is the html code, as you can see the div is the first one:
<body id='body'>
<div id="kassaInfo">
<div id="closeKassaBtn"></div>
</div><!--The rest of the Code-->
</body>
Here comes the first Js actions with it, this only centers the div base on rest the half of its witdh (This works fine) so since its 50% leftted is going to be always at the center. PS. I used Greensock TweenMax JS library but is just a tween movement of margin.
var $kassaInfo = document.getElementById('kassaInfo');
var $kassaMargin = findMargin('kassaInfo');
TweenMax.to($kassaInfo,1,{css:{alpha:0.6, marginLeft:$kassaMargin},ease:Expo.easeOut});
And here is the function for the click event:
var $kassaInfo= document.getElementById('kassaInfo');
TweenMax.to($kassaInfo,1{css{alpha:1, marginTop:220},ease:Expo.easeOut});
Well here comes the thing, as you can see the div is outside from anyone and is absolute, I don't know why the extra space in FF/Chrome.
Thanks for any help or hint that can help me out.
Greetings.
Using top instead of margin-top is the correct way, As I said I'm pretty newbie so I didn't know this little different when it comes about using position:absolute. Is like there is no margin when is absolute, just plain left, top etc.
Anyway I couldn't get right clear why the extra 300px, if someone could add some info about this it will be very appreciated.
Greetings.
I have a div that is the body of my site, inside that div I put a div on the left side (to have a vertical menu)
http://www.freeimagehosting.net/uploads/117f79fa0e.png
http://www.freeimagehosting.net/uploads/4569a5f550.jpg
My question is, how can I make the menu div follow up to the bottom of the body div so that it doesn't look like it was cut, because of the color the menu div has...I've played around with properties like position, margins, float, yet I can't seem to get it to work...
I've included two pics so that you can see the divs!
Sorry pics don't appear because i'm a new user!! i've included links though...
The first picture is the inital page, and the second is after content was added and the body div expanded to make that content fit!
Any help appreciated!
This technique has always worked for me.
See http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
The background is actually on the wrapper of the two columns though.
This is really something best approached with CSS.
Say this is your structure:
<body>
<div id="main">
<div id="leftSide"></div>
</div>
I think what you'd want to do is give the left side a height of 100% in your CSS:
#main {
height:500px; /*this can be whatever height you want for your main div*/
width:700px; /*same with this, for its width*/
background-color:#F00; /*just to show you the effect*/
}
#leftSide {
float:left; /*THIS is where the magic happens, to "pull" it to the left*/
height:100%; /*This makes sure it reaches all the way to the bottom*/
background-color:#00F; /*or any color you'd like (which is a great song btw)*/
width:200px; /*or whatever height you'd like*/
}
This all assumes of course that you don't have extra margins and padding on your divs or other elements. You also might want to consider a "CSS Reset" like this one