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.
Related
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"
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;
}
I have a wrapper with some padding, I then have a floating relative div with a percentage width (40%).
Inside the floating relative div I have a fixed div which I would like the same size as its parent. I understand that a fixed div is removed from the flow of the document and as such is ignoring the padding of the wrapper.
HTML
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
CSS
body {
height: 20000px
}
#wrapper {
padding: 10%;
}
#wrap {
float: left;
position: relative;
width: 40%;
background: #ccc;
}
#fixed {
position: fixed;
width: inherit;
padding: 0px;
height: 10px;
background-color: #333;
}
Here is the obligatory fiddle: http://jsfiddle.net/C93mk/489/
Does anyone know of a way to accomplish this?
I have amended the fiddle to show more detail on what I am trying to accomplish, sorry for the confusion:
http://jsfiddle.net/EVYRE/4/
You can use margin for .wrap container instead of padding for .wrapper:
body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{
float: left;
position: relative;
margin: 10%;
width: 40%;
background:#ccc;
}
#fixed{
position:fixed;
width:inherit;
padding:0px;
height:10px;
background-color:#333;
}
jsfiddle
Try adding a transform to the parent (doesn't have to do anything, could be a zero translation) and set the fixed child's width to 100%
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
position: relative;
width: 40%;
background:#ccc;
transform: translate(0, 0);
}
#fixed{
position:fixed;
width:100%;
padding:0px;
height:10px;
background-color:#333;
}
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
How about this?
$( document ).ready(function() {
$('#fixed').width($('#wrap').width());
});
By using jquery you can set any kind of width :)
EDIT: As stated by dream in the comments, using JQuery just for this effect is pointless and even counter productive. I made this example for people who use JQuery for other stuff on their pages and consider using it for this part also. I apologize for any inconvenience my answer caused.
man your container is 40% of the width of the parent element
but when you use position:fixed, the width is based on viewport(document) width...
thinking about, i realized your parent element have 10% padding(left and right), it means your element have 80% of the total page width. so your fixed element must have 40% based on 80% of total width
so you just need to change your #fixed class to
#fixed{
position:fixed;
width: calc(80% * 0.4);
height:10px;
background-color:#333;
}
if you use sass, postcss or another css compiler, you can use variables to avoid breaking the layout when you change the padding value of parent element.
here is the updated fiddle http://jsfiddle.net/C93mk/2343/
i hope it helps, regards
You could use absolute positioning to pin the footer to the base of the parent div. I have also added 10px padding-bottom to the wrap (match the height of the footer). The absolute positioning is relative to the parent div rather than outside of the flow since you have already given it the position relative attribute.
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
padding-bottom: 10px;
position: relative;
width: 40%;
background:#ccc;
}
#fixed{
position:absolute;
width:100%;
left: 0;
bottom: 0;
padding:0px;
height:10px;
background-color:#333;
}
http://jsfiddle.net/C93mk/497/
On top of your lastest jsfiddle, you just missed one thing:
#sidebar_wrap {
width:40%;
height:200px;
background:green;
float:right;
}
#sidebar {
width:inherit;
margin-top:10px;
background-color:limegreen;
position:fixed;
max-width: 240px; /*This is you missed*/
}
But, how this will solve your problem? Simple, lets explain why is bigger than expect first.
Fixed element #sidebar will use window width size as base to get its own size, like every other fixed element, once in this element is defined width:inherit and #sidebar_wrap has 40% as value in width, then will calculate window.width * 40%, then when if your window width is bigger than your .container width, #sidebar will be bigger than #sidebar_wrap.
This is way, you must set a max-width in your #sidebar_wrap, to prevent to be bigger than #sidebar_wrap.
Check this jsfiddle that shows a working code and explain better how this works.
Remove Padding: 10%; or use px instead of percent for .wrap
see the example :
http://jsfiddle.net/C93mk/493/
HTML :
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
CSS:
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
position: relative;
width: 200px;
background:#ccc;
}
#fixed{
position:fixed;
width:inherit;
padding:0px;
height:10px;
background-color:#333;
}
I have the following:
<div class="parent">
<div class="sizer" />
<div class="child" />
</div>
.sizer {
width: 200px;
}
.child {
position: relative;
width: 400px;
}
I am not allowed to explicitly set the width on the parent, and I am not allowed to set the child to position:absolute.
Using CSS, is there any other way to set the width of .child to 400 without also having the width of .parent expand from 200 to 400?
If the parent has a set width, then it will not expand with the width of the child, even if the child's width exceeds that of the parent. See this JS Fiddle example.
.parent {
width: 300px;
height: 50px;
}
.child {
width: 400px;
height: 50px;
position: relative;
}
UPDATE
I am wondering if there is any kind of hack that allows me to do it without setting width on parent
There is no way to accomplish this without the parent having some sort of width or width-like property. If you are only opposed to using the width property on the parent, you can use several width-like alternatives.
As cimmanon explained in a comment below, you could set .parent to have a max-width. It does not necessarily have to be 100%; any max-width will do, as long as it is less than the width of the child. See this JS Fiddle example, or check out this code:
.parent {
max-width: 200px;
}
.child {
width: 400px;
}
Alternatively, you could use position:absolute and set the left and right properties. See this JS Fiddle example, or check out this code:
.parent {
position:absolute;
left:0;
right:0;
}
But remember, these are only two of the many possible alternatives. Hope this helps!
You could set the max-width of the parent to 100%.
http://jsfiddle.net/aFdzy/
.parent {
max-width: 100%;
}
.child {
width: 400%;
}
We want a top bar on our page which is as wide as the browser's width. The problem is, it is inside a container div. If you pull it out of the container we can expand the div to the body width, but when it is inside the container it can only expand to the width of container.
Is there a solution through which we can expand the topbar past the container div.
<div id="container">
<div id="topBar">
<p>The Paragraph</p>
</div>
</div>
You can position the #topBar absolute without making it relative to its' immediate parent
html, body {
height: 2000px;
}
#container {
width: 50%;
margin: auto;
height: 200px;
background: beige;
}
#topBar {
position: absolute;
left: 0;
background: #ccc;
width: 100%;
}
DEMO
The other possibility is to remove it from the document flow with position:absolute. However, you need to know your height of the topBar, and will have to compensate by forcing a top margin on the rest of your content to keep it below your topBar.
For example, you could do:
#topBar {
position:absolute; /* fixed might also work, here */
top:0; left:0;
width:100%;
height:50px;
}
but you'd also have to have:
#container {
margin-top:50px; /* or more */
}
This will break, however, if you need to make #container position:absolute or position:relative.