Below is the code I am working on. As you can see, there is a '#parent' div and a '#child' div. the '#child' div has an undefined height, this is because sometimes, the height of the '#child' is smaller or longer than it's parent's height which is '400px' as written below. The problem I am getting is, whenever the child's height is longer than the #parents height, the #child's content's overlaps or pass outside the parent's wrap.
<style>
#parent{
position: relative;
height: 400px;
width: 500px;
}
#child{
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="parent">
<div id="child">
//Some content
</div>
</div>
If you want any overflowing content on #child to be hidden, use:
#parent {
overflow: hidden;
}
If you still want to be able to see all the content in #child, you can contain it in a scrollbar. Then the height of #child won't clash with the height of #parent.
#parent {
overflow: auto;
}
Edit:
If you want #parent's height to stretch with #child, #child cannot be absolute positioned. Take that off, and it will work. If you want height to be at least 400px, then you can use:
#parent {
min-height: 400px;
}
See fiddle: http://jsfiddle.net/VYrLh/
Try adding
overflow: auto;
to the #parent style.
An absolute positioned element doesn't follow any of it's parent CSS rules.
Just add following in child selector
#child{
position: absolute;
top: 0px;
right: 0px;
max-height: 400px;
overflow-y: auto;
}
Related
In css, how we can fixed width(in full 100% not in px) of a div which have property is position fixed inside the div which already used postion absolute property.
let me know about its. this issue I am facing for long time.Is there any solution of this?
I'm not sure if this is what you want but I find a solution on this post : Set width of a "Position: fixed" div relative to parent div
It use width:inherit
.parent {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
left: 20px;
top: 20px;
}
.child {
background-color: blue;
position: fixed;
width:inherit;
}
<div class="parent">
<div class="child">test</div>
</div>
I am attempting to create a game where the first thing that the user sees is a start-menu modal on top of a game background.
Basic HTML:
<div class="game-board">
<div class="menu"> </div>
</div>
CSS:
html, body{
min-height:100%;
}
.game-board{
background-image: url(../images/sand.png);
width: 1260px;
height: 100%;
}
.menu{
position: absolute;
width: 400px;
right: 0;
top: 30%;
left: 31%;
background: whitesmoke;
border-radius: 4px;
}
I expected the above code to show the background-image in the background, and then somewhere near the middle of the image, the "modal" is above the background. However, for some reason that I'd love to know, the parent div .game-board is collapsed with no height and thus no background image, but the modal appears fine. Why is this?
Rule - For height in percentage to work in CSS, the parent element should have a height that can be calculated.
For example, when you say .game-board should have a height of 100% - then the question that arises is 100% of what? Because the parent element body in this case, does not have height specified explicitly. Min-height does not work because that does not fix the height of the element to a particular value on a particular view port. For example, if the viewport has height 100px then min-height: 100% could mean anything from 100px to infinity. Thus the height rule on .game-board doesn't work.
To fix this, change min-height to height
html, body {
height: 100%;
}
Also, the absolutely positioned menu, needs to have a height if there is no content as of yet inside it, else it would not appear.
Here is a working fiddle. http://jsfiddle.net/8dhfac8w/
.game-board needs a fixed height. .menu can do with a variable height so long as it's contained by a fixed height parent. This works (Fiddle).
html, body{
min-height:100%;
}
.game-board{
background-image: url("http://trikkiworld.com/images/bg/bg_sand/25012011/sand006.jpeg");
width: 200px;
height: 200px;
}
.menu{
position: relative;
width: 50%;
height: 50%;
top: 25%;
margin-left: auto;
margin-right: auto;
display: block;
background: whitesmoke;
border-radius: 4px;
}
Is there any solution without JS?
html
<div class="wrapper">
<div class="fix"></div>
</div>
css
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
width: inherit;
height: 20px;
position:fixed;
background: black;
}
I cant add any other styles for .wrapper except width: 100%;.
I try with width: inherit but it doesn't work for me because of I have parent div with only max-width. source
Here is JsFiddle Demo
A position:fixed element is not relative to its parent anymore. It respects only the viewport's boudaries.
MDN Definition:
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So any width, max-width, or whatever property will not be respected by the fixed element.
EDIT
In fact, it won't inherit the width because there's no width property defined on the wrapper.. So, try setting the child as width: 100% and inherit the max-width:
http://jsfiddle.net/mx6anLuu/2/
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
max-width: inherit;
width: 100%;
height: 20px;
position:fixed;
background: black;
}
there is already a width on the column, just set the width of the fixed element to inherit. no reason to complicate things.
CSS:
.col-sm-3 { width: 25%; }
.fixed-in-col { width: inherit; ... }
HTML:
<div class="col-sm-3">
<div class="fixed-in-div">
...
</div>
</div>
It seems there is no solution without JS.
This blog post by Felipe Tadeo explains why:
https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied
It explains the confusion around width: inherit
"Fixed positions itself relative to the viewport... whenever you inherit width (with position fixed) it will be with respect to the viewport"
I've tried many examples in other questions but none seem to work for me. I'm simply trying to create a div container with a side bar 100px wide and will vertically expand with the container if it dynamically grows. See below;The inner div simply won't grow even when I set the height to 100%
My CSS looks this;
<style>
#outer {
border:10px solid #7A838B;
margin:10px;
border-radius:30px;
max-width:500px;
min-height:200px;
}
#leftblock {
background-color:#7A838B;
width:100px;
height:auto;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
margin-left:-10px;
margin-top:-10px;
}
#inner {
color:white;
height:100%;
}
</style>
and my HTML is like so;
<div id="outer">
<div id="leftblock">
<div id="inner">
Test
</div>
</div>
</div>
It goes as #mmeverdies says,
In order to set height:100%, the parent must establish a defined height too but if height property value is 'inherit', then the grandparent must set it. and so on.
You basically have two options here, either:
1) Define the exact height of the parent element. Then 100% height of the child will work then.
2) Stretch the child element with position: absolute like this: http://jsfiddle.net/r02nbmd9/ - note the position: relative of the parent and position: absolute of child.
<div class="parent"><div class="child"></div></div>
<style>
.parent {
position: relative;
width: 300px; min-height: 200px;
background: yellow;
}
.child {
position: absolute; top: 0; bottom: 0;
width: 100px;
background: red;
}
</style>
In order to set height:100%, the parent must establish a defined height too but if height property value is 'inherit', then the grandparent must set it. and so on.
to understand it take a look to this css.
example: for full browser height.
html, body {
height: 100%;
}
#outer {
height: 100%;
}
#leftblock {
height: 100%;
}
#inner {
height:100%;
}
by default the HTML height is 0. so, you must set the height property to other than 'inherit' of at least one parent.
I have this
<div id="container">
<div id="div1"></div>
<div>
Now, let's assume that:
the "container" has a width of 300px
the "container" has overflow: hidden;
the "div1" has a width of 1000px;
the "div1" is absolute positioned, top:0px,left:0px;
The problem:
The "div1" is not hidden, it overflows the "container" but it's still showing :(.
If I simply remove the "position:absolute" it will work.
How can I hide the overflow of "div1" ?
Add position: relative to container div element.:
Exa:
<style type="text/css">
#container
{
width: 200px;
background-color: red;
height: 60px;
color: white;
position: relative;
overflow: hidden;
}
#div1
{
background-color: blue;
position: absolute;
top:0px;
left:0px;
width: 300px;
}
</style>
<div id="container">
<div id="div1">This is div1</div>
<div>
adding
#container { position: relative; }
will hide the overflow.
Adding position absolute to an element will remove that element from the normal flow.
It will position itself absolute to the closest parent that is relatively positioned.
This is why adding "position:relative" to the "container" will achieve the desired effect.