I need to animate my ng-view with a slide effect. Therefore I got 3 divs
<div style="overflow:hidden">
<div ng-view style="position:absolute">
<div style="position:relative"> LONG CONTENT </div>
</div>
</div>
I´m testing these effect. The outer div needs to be overflow:hidden to let my slide effekt work.The inner div needs to be absolute. If the inner div contains some text, the other 2 divs should expand the height according to the very inner div. Same like when all divs would be relative. How to achieve this?
Like in my example link but with variable height.
EDIT: This is a complete other question then the "possible" duplicate.
The problem is the size of your contents, you`re making your inner div absolute, so the parents it won’t
have any height. First thing you have to do is define size to your elements and than you can use absolute elements to make your layout.
see the example below, i define a div named .page with min-height:200px, that will be enough to appear your element (.slide), because if you don’t do this, your element(.page) height will be 0, and it will be cut by overflow:hidden.
<style>
.page {
background-color: #DDD;
overflow: hidden;
position: relative;
min-height: 200px;
}
.slider{
position: absolute;
}
.slide{
position: relative;
}
</style>
<div class="page">
<div class="slider" ng-view>
<div class="slide"> LONG CONTENT </div>
</div>
</div>
Related
please don't mark this question as duplicate because I don't think anyone asked this before. I know that position:absolute takes the element out of the flow, but that doesn't explain why its parent's height collapses to 0. If I have this markup:
<div class="container">
<div class="inside">
some content
</div>
</div>
Then I add these styles:
.container {
background-color: red;
position: relative;
}
.inside {
background-color: green;
position: absolute;
}
Applying absolute positioning to the child will make the container's height collapse to 0. The only way to make it visible is to apply height, but not in percentages.
Does anyone know why this happens?
And is there a way to make it not happen?
Thanks in advance
I need to make a div relative to another (act as a child) div that is not its parent. Unfortunately I cannot use position:absolute on the second div to force it into the first one, because when the window is made smaller the div is then out of place.
This is what I need to happen:
<div id="first" style="position:relative;" >
<div id="second" style="position:absolute;"></div>
</div>
This is what I currently have:
<div id="first" ></div>
<!--there is other content/html between the divs-->
<div id="second"></div>
Is there any way to make the second div relative to the first div? Without changing the HTML code of the page.
More info: There is a piece of content outputted to the webpage. I need to reposition this piece of content once it has been output using CSS/JQuery. So I need to make that piece of content relative to content that is already on the screen. It cannot be a child of the first div and using position:absolute wont do. The two div are not beside each other, and are at completely different ends of the page.
I basically need the second div to act as a child of the first div, without it actually being its child.
using javascript (for example):
var div1 = document.getElementById('first');
var div2 = document.getElementById('second');
div1.style.marginTop = div2.offsetTop; //set the margin top of the first div = the margin top of the second div
If you know width and height of the #first element, then you can do the following:
<div class="parent">
<div id="first"></div>
<div id="second"></div>
</div>
.parent{
width: 200px;
height: 200px;
background-color: green;
}
#first{
width: 100%;
height: 100%;
background-color: blue;
}
#second{
min-width: 20px;
min-height: 20px;
background-color: red;
margin-top: -200px; /* equal to #first height */
max-width: 200px; /* equal to #first width */
max-height: 200px; /* equal to #first height */
word-break: break-all;
overflow:auto;
}
jsFiddle
Here is JSBin
<div id="first" style='float:left;'></div>
<div id="second"></div>
I want to have a div with fixed position inside a div with overflow-y:scroll, meaning I want the div to stay in place while the rest of the content scrolls normally.
And I can't figure out what is wrong, could anyone help? thanks in advance...
.foo {
position:relative;
display:block;
width:100%;
height:300px;
overflow-y:scroll;
}
.bar {
position:fixed;
top:0;
right:0;
}
And here is the HTML
<div class="foo">
<div class="bar"><div><!-- end of div that should be fixed -->
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
</div><!-- end of container -->
When you apply position:fixed to an element, you are positioning it in relation to the window itself, not its parent element. You'll want to use position:absolute to position a child in relation to its parent, as long as the parent has a position other than position:static, the default position.
As you correctly did in your example, apply position:relative to the parent .foo and then apply position:absolute to the child .bar. Normally, this would achieve the desired result of snapping the .bar to the top of the parent, but since there is an overflow of child content in the parent div, and overflow-y:scroll scrolls all the child content, .bar has to scroll as well. See the top example in my Fiddle here.
To fix that, wrap the content you want to scroll in another container with overflow-y:scroll on and remove overflow-y:scroll on .foo to prevent .bar from scrolling.
To see the working example that you can adapt, see the bottom example in my Fiddle here.
A fixed elements position is relative to the entire document you are viewing, not whatever the parent element is. If you want that to work, you'd need something like this:
CSS
.foo {
height : 300px;
position : relative;
width : 100%;
}
.bar {
border-bottom : 1px solid #000;
height : 50px;
}
.scollable_content {
height : 250px;
overflow-y : auto;
}
HTML
<div class="foo">
<div class="bar"></div>
<div class="scrollable_content">
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
</div>
</div>
Here, I created a fiddle for you.
Let's say I have two divs, one inside the other, like so:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="width:100%">
</div>
</div>
</body>
</html>
Right now, the inner div has a width of 100% of 50% of the screen size, or 50% of the screen size. If I were to change the inner div to position absolute, like this:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="position:absolute;width:100%">
</div>
</div>
</body>
</html>
In this case the inner div takes up 100% of the screen space, because its position is set to absolute.
My question is this: Is there any way to maintain relative width of the inner div while its position is set to absolute?
Add position:relative to your outer div.
update: It works because positions in position: absolute are relative to the first parent that has some positioning (other than static). In this case there was no such container, so it uses the page.
Yes. Set outer to position: relative.
http://jsfiddle.net/57673/
.outer
{
width: 50%;
height: 200px;
position: relative;
border: 1px solid red;
}
.inner
{
width: 100%;
position: absolute;
height: 100%;
border: 1px solid blue;
}
I had an element that had to be position:absolute in a project and I found that setting width to max-content fixed that for me.
It seems to be well supported across modern browsers. Check this link for more info: Mozilla.org (max-content) .
Attempt #3.
Using css, with a strict doctype, can someone please draw 4 div boxes to meet these requirements.
The wrapper or outermost div will scale in height. That means that it could be any height.
The middle div should always be 100% high to match the outer/parent div (#1 in my list)
The next div should be positioned inside, and at the top of div #2
The last div should be positioned inside, and at the bottom of div #2
NOTES:
If you use absolute positioning for this, you will put divs 3 and 4 outside of div #1 and that won't work. The key is to keep divs 3 and 4 within div #2
<div id="wrapper">
<div id="middle">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</div>
#wrapper { height: 200px; position: relative; }
#middle { height: 100%; }
#bottom { position: absolute; bottom: 0; }
It should work for any height you give the #wrapper.
you can play with it here: http://jsfiddle.net/dmBsa/