So I've got a fixed position element. It has a child that is position:static. A child of the position:static element is position:fixed, and doesn't scroll with it's parent, behaving like a fixed position element. Is there any way to get the grandchild element to scroll? I'd REALLY like to avoid specifying position:relative. Any thoughts on a solution. I'd also like to understand that behavior a little better.
<div class="fixed-parent">
<div>
<div class="absolute-child">
Test
</div>
<div class="some-stuff-to-make-it-tall">
really tall
</div>
</div>
.fixed-parent{
width:500px;
height:500px;
border:1px solid #ccc;
}
.fixed-parent > div{
height:500px;
overflow-y:scroll;
}
.some-stuff-to-make-it-tall{
margin-top:25px;
height:600px;
}
.absolute-child{
position:absolute;
}
https://jsfiddle.net/L5hscgu5/1/
Right now .absolute-child is not positioned relative to the scrolling div. Adding position: relative; to .fixed-parent > div accomplishes what I think you're trying to do.
https://jsfiddle.net/L5hscgu5/4/
.fixed-parent > div{
height:500px;
overflow-y:scroll;
position: relative;
}
Related
I have problem with keeping my child div the same height of parent during shrinking browser window(checking responsive mode). What i would like to achieve is to not allow the content inside absolute positioned child overflow but at the same time would like to keep the size of child div on 100% height of the parent div.I know that absolute position causes element to interfere natural page positioning, but maybe you know some tricks or JS is only way?
Regards!
HTML code:
<div class=parent>
<div class=child>
<p class=intro>Introduction</p>
<div class=box_container>
<div class=box></div>
<p>some_text</p>
</div>
<div class=box_container>
<div class=box></div>
<p>some_text</p>
</div>
<div class=box_container>
<div class=box></div>
<p>some_text</p>
</div>
</div>
</div>
CSS code:
.parent{
width:250px;
height:250px;
background-color:green;
position:relative;
}
.child{
display:flex;
flex-direction:column;
background-color:red;
position:absolute;
}
.box_container{
display:flex;
flex-direction:row;
align-items:center;
}
.intro{
position:relative;
top:10px
}
.box{
width:15px;
height:15px;
background-color:yellow;
}
Link to fiddlejs with code: https://jsfiddle.net/bfbcfu2e/1/
You can add:
top:0;
bottom:0;
...to an absolutely-positioned element and it will fit the height of its positioned container. But if there's not enough space for the text content, it will struggle to fit everything inside for you.
I have a "fixed" DIV on the very top of my page:
<div id="banner-wrapper">
<div id="banner"></div>
</div>
with the following CSS:
#banner-wrapper {
width:300px;
height:500px;
}
#banner {
width:300px;
height:500px;
position:fixed;
top:0;
left:0;
background:orange;
}
This "fixed" DIV is followed by a "content-wrapper" DIV:
<div id="content-wrapper">
<div id="content-left">
content left
</div>
<div id="content-right">
content right or sidebar
</div>
</div>
with the following CSS:
#content-wrapper {
width:300px;
background:red;
position:absolute;
top:500px;
bottom:0;
}
#content-left {
width:150px;
float:left;
}
#content-right {
width:150px;
float:right;
}
The issue I'm having is that the "content-wrapper" DIV does not fully cover the "fixed" DIV. The top of the "content-wrapper" covers the "fixed" DIV and the bottom of "content-wrapper" becomes transparent, showing the "fixed" DIV beneath.
I was able to solve the problem by giving the "body" a height in CSS. However, I do not want to give the "body" a height as I do not know the true hight of the content and would like it to remain flexible. I've also have tried inserting
<div style="clear:both;"></div>
before the closing tags but it does not force the "content-wrapper" down.
Here is an example of the issue on JSFiddle.
As you can see, the "red" box does not reach the "blue" box even though it is set to absolute, bottom 0. From what I can tell it reaches the bottom if it does not contain any DIVs inside of it. But once I add the "content-x" DIVs, it no longer reaches the bottom of the page.
Thank you for any help.
You could relatively position the element #content-wrapper rather than absolutely positioning it. Then you can omit the top/bottom positioning and it will behave as expected.
The reason it wasn't working in the first place was because you were giving the absolutely positioned element a height of 100%. Therefore it will have the same height is the window, which is not what you wanted.
Updated Example
Change the following:
#content-wrapper {
width: 300px;
height: 100%;
background: red;
position: absolute;
top: 500px;
bottom: 0;
}
to:
#content-wrapper {
width: 300px;
background: red;
position: relative;
}
I'd prefer to do this using only CSS.
I have a relative element which contains an absolute element. I want the relative element to be sized based on how big the absolute element is, so in other words it should wrap neatly around it. To illustrate, in this fiddle, "footer" is positioned underneath "header-wrapper", but it overlaps its contents because "header-wrapper" is ignoring its absolute contents: http://jsfiddle.net/cxmjdL78/1/
HTML
<div class="wrapper">
<div class="header-wrapper">
<div class="header-1">HEADER HEADER HEADER</div>
<div class="header-2">HEADER HEADER<br>HEADER HEADER</div>
</div>
<div class="footer">this text should go below the header</div>
</div>
CSS
.wrapper {
position:relative;
width:300px;
height:300px;
}
.header-wrapper {
position:relative;
}
.header-1 {
position:absolute;
background:#232323;
width:100%;
height:auto;
opacity:0.4;
}
.header-2 {
position:absolute;
background:#323232;
width:100%;
height:auto;
opacity:0.4;
}
.footer {
position:relative;
background:#26d452;
opacity:0.4;
}
When you use position:absolute on an element, you "take it out of the flow". You can't get a size based on a absolutely positioned element as far as I know. You have to set the height on your header-wrapper, or use javascript to achieve the effect.
Why do you have to use position absolute?
For a CSS only solution, the only thing I can think of is to add a height to your header-wrapper. If the content in your div is static, this will solve your problem, but if it's dynamic, you're going to be forced into some kind of JavaScript solution.
This is my style.
<style>
.wrapper { margin:0px auto; height:600px; width:600px; position:relative; background:#F2F7FF; padding:20px; overflow:hidden }
.pos-rel { width:90%; background:#FFF; height:400px; position:relative; padding:5%; }
.pos-abs { position:absolute; height:100px; width:200px; position:absolute; background:#89BCFF; border:1px solid #517099; right:-110px; }
</style>
This is my HTML :
<div class="wrapper">
Wrapper
<div class="pos-rel">
Position relative Parent block
<div class="pos-abs">
Position Absoulute child block
</div>
</div>
</div>
JSFIDDLE HERE
Problem is :
The block having position absolute is visible only half. Half block is hidden due to wrapper.
Before you give any solution, i must state that i have to used Overflow:hidden in the parent block.
Actually, you can avoid parent's overflow:hidden, if you remove position:relative from .wrapper. Here is working example
Can you tell me what you want to create
like if you are using overflow: hidden then it will not come.
or else you have to reduce right minus margin from right.
can you make it more clear like why you want this..
I have a div that is as high as the window and about 4 times as wide (it is stretched horizontally by elements inside it).
And then this other <div> inside it, which is supposed to be as wide width:100% as its parent (it's for a background picture).
However, the child <div> is only as wide as the window and doesn't quite fill up its parent. This happens in all browsers I've tried.
Why is that, and how can I fix it ?
Source :
<style>
.parent
{
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child
{
width:100%;
height:200px;
position:absolute;
bottom:0;
left:0;
background-color:#000;
color:#fff;
}
.stretcher
{
width:10000px;
height:32px;
position:absolute;
}
</style>
<div class="parent">
<div class="child">this should stretch as much as its parent !</div>
<div class="stretcher">this is some content that defines the page's width</div>
</div>
JSFiddle
The .stretcher div will not expand the parent as position: absolute takes the element out of the page flow so its width has no effect on the parent. Child is behaving properly and expanding to the width of the parent. You can see this clearly if you use Firebug or similar.
As for how to fix it, not sure exactly what you're trying to accomplish with the stretcher div and why you don't just give the parent the width. Perhaps you could expand a bit on what you're trying to do with this structure.
Maybe the outside <div> should be positioned relative. The inside <div> can be absolute but you may want to try adding right:0px; as well as left:0px which you already have. I would avoid absolute positioning unless there is no other way to do it.
I'm not sure why the child <div> doesn't fill the parent, but in order for it to work you need to wrap the .stretcher <div> around both the parent and child <div>.
Source:
<style>
.parent {
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child {
width:100%;
height:200px;
position:absolute;
bottom:0;
background-color:#000;
color:#fff;
}
.stretcher {
width:10000px;
height:100%;
position:absolute;
}
<div class="stretcher">
<div class="parent"><p>this is some content that defines the page's width</p>
<div class="child">this should stretch as much as its parent !</div>
</div>
</div>