I have a small issue with which I'm struggling.
I need to align a element to the top of a percent div with bottom: 100% but I can't get it to align within the parent div.
So what I need is bottom: 0% to be aligned with the bottom of a div and bottom: 100% to be aligned with the top.
Any ideas?
EDIT:
http://jsfiddle.net/GmAEx/
I want the gray bar in that sample to be aligned to top: using 'bottom' 100%
It don't really understand what you mean with bottom: 100%, maybe you mean bottom: 0;?
Also see your updated example.
=== UPDATE ===
Thanks for the comment, I think now I know what are you want to get. The problem is, that bottom: 100% for the 'slider handle' means that it is completly outside the parent div.
Add a wrapper around the parent div which has the complete height minus the height of the slider handle and add a padding with height of slider handle. Replace the parent height with 100%. Move the with, background-color and margin-top to the wrapper too.
Also see bottom: 0%: updated example.
Also see bottom: 100%: updated example.
Presumably this is being dynamically generated, otherwise you'd just use top: 0 instead.
If this is the case, then you probably have something like:
child.style.bottom = y+"%";
In which case, it's a simple matter of adding:
child.style.marginTop = (child.offsetHeight/100*y)+"px";
Related
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
I am having a CSS issue; See the attached image.
there have two fixed div.. where i will put my navigation and yellow area is my content area. content area will be scroll if content big..
but now problem i am facing content area position not fit properly. when i make other two div position: fixed then issue coming. please see my code and jsfiddle..
.midarea this div position not properly fit there. if you see jsfiddle then can under properly..
JSFiddle
You need .midarea to be fixed to match the others:
.midarea {
position: fixed;
left:260px;
right: 0;
height: 100%;
overflow: auto;
...
}
With this your float and width are obsolete (but you can have them if you really want).
Also please, please lose every z-index and every float with a position: fixed or position: absolute.
Visualize
position:fixed is absolutely OK.
Just calculate the sum of width of both fixed nav-colums and set a padding-left with this calculated width to the div.midarea. So all divs inside the midarea begin right of the fixed colums.
And a z-index higher of the content is needed. e.g. z-index:999;
I am assuming I will need Javascript for this, but perhaps there is a CSS trick I'm not aware of.
I have a web page based on a square background image. Ideally, the user would always set the browser as a square, but I know that won't happen.
Because the image is square, if the image is set to fill the browser at 100%, the width is always the same as where the "bottom" of the page should be.
Thus, to position an element dynamically horizontally (so the page can be resized but still hold it's structure), the top position of said element is a percentage of the width.
In other words, if I have a horizontal bar that should ALWAYS be positioned 85% from the top of the image, the top position can be defined as 85% of width (top:85% [of browser width]). If you simply define the top of the horizontal bar as 85% (top:85%;), the horizontal bar's position will vary with the height of the browser window (whereas if you set it as 85% of the width it would be exactly where I want it).
As mentioned before, this is likely an easy thing to do with Javascript, but I don't know Javascript. I assume there isn't a function in CSS that will allow positioning by calculating a percentage of width, but that would be ideal.
Any help is greatly appreciated! Thanks in advance.
======================================
(source: renboy.com)
Unfortunately I'm a new user and the interface won't allow me to post a photo.
The page is square (a large, square image). There is a horizontal navbar who's top should be positioned 85% from the top of the image (it would be defined as (top:85%;) if the browser were opened to the exact same size and dimension (square) of the image).
However, if someone drags the bottom of their browser down (to make a tall rectangle), 85% will not be where I want it over the image. HOWEVER, 85% of the width will ALWAYS be in the exact right spot (because the image always fills 100% of the width). So, if I could define the horizontal position as 85% of the browser width (instead of height), the navbar would be exactly where I want it, no matter what dimensions the browser is open to. Thanks in advance for any possible solutions.
==================
Doing more research, it would seem that the answer might lie in Jquery (using position or maybe outerWidth or possibly something like var winWidth = $(window).width();), but I have no experience with Java/Javascript. Any help out there? Again, I want to set the position of the div holding the horizontal navigation bar to 85% of the width of the browser window. Thanks!
http://jsfiddle.net/f7RMA/
<div class="box">
<img src="http://renboy.com/images/squareWeb.jpg">
<div class="bar"></div>
</div>
CSS:
.box {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
}
.box img {
display: block;
width: 100%;
}
.box .bar {
position: absolute;
width: 100%;
height: 10%;
top: 85%;
}
WTF happens: .box is set to 100% width. The image inside is also set to 100%. Images in non-crappy browsers keep their aspect ratio when they are resized by only one side. .box wants contain the image entirely, so its height will be set to image's height. Because .box is positioned absolute, you can put the .bar inside the .box and position it vertically as you wish, because .box now has a well-defined height.
I have certain generated shapes using css3. I want to display only some part of block eg: 25% of above or 25% of bottom. How do I achieve this?
eg: In http://jsfiddle.net/HNyHM/1/ ; I want to display only 25% from above.
Check this. http://jsfiddle.net/LB8mC/
Wrap you CSS shape inside a div, give it the height, width exactly how much you want show the shape. Then position the shape absolutely with respect to the wrapper.
Here is what I have used in fiddle.
.shape-wrapper {
position:relative;
overflow:hidden
height: 25px;
}
.shape-wrapper > div {
top: -25px;
left: -25px;
}
You can keep on changing the position of child div (top 25% or bottom 25% like you were asking using JS.
Adding a wrapper div might help. See http://jsfiddle.net/HNyHM/3/ for a start with fixed sizes though.
A more convoluted example of this question is here: child div height of 100% being ignored (a working solution is yet to be found)
Validating test case for my question: http://www.elucidatedbinary.com/tmp/layouttest_100percentheight.html. I want the #main div (yellow background) to expand to 100% of the height of it's parent div (#container).
My question is simple, can this be done without
Reverting to jQuery (yucky!) or
Reverting to tables (yuckier!)
I am yet to find a single example of how this can be done using the CSS layout model.
Thankyou.
EDIT: When I say "expand to 100% of the height of it's parent div" I mean expand all the way to beneath the footer. The header is supposed to leave a pink gap at the top.
try:
#main { position: absolute; top: 0px; bottom: 0px; }