Set child width relative to its parents height in pure css
Just assign your parent's height property value to a css variable and then use calc() to assign your child element's width to a value that is 10% of your parent's height.
Check and run the Code Snippet below for a practical example of what I have described above:
.parent {
position: relative;
--parentHeight: 300px;
height: var(--parentHeight);
width: 600px;
background-color: red;
}
.parent .resized {
height: 100px;
}
.child {
position: absolute;
height: 20%;
width: calc(var(--parentHeight) / 10);
background-color: green;
}
<div class="parent">
<div class="child"></div>
</div>
Set child's width to the height of the parent in pure CSS
Based on this specific demo, you could use viewport relative units and it will work as expected.
Use width: 80vh
in this case - updated example. You can find browser support here.
Since #parent-div
has a height of 80%
of the viewport, you can use 80vh
to set #child-div
's width to the same height. This clearly won't work if #parent-div
doesn't have a height of 80%
of the viewport, though.
As an alternative, you would have to avoid rotating the child element, and just rotate the parent element and give the child element a height of 100%
.
How can I expand floated child div's height to parent's height?
For the parent
element, add the following properties:
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
then for .child-right
these:
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
Find more detailed results with CSS examples here and more information about equal height columns here.
Relative parent DIV to inherit the width of absolute child DIV
The short answer is that what you are asking basically can't be done with pure CSS / HTML. (at least without tables) You'd need Javascript that would read #child's width/height and then do the calculation you want to do (I don't know) and set a new height/width to #parent.
Otherwise, if you mean that you want #child's height/width to change according to its content, of course this is native CSS, just set it's height/width to auto and then start adding text inside it you'll see it will start growing to fit your content inside.
As the #child is positioned absolute, then it is taken OUT of the normal flow of the document, therefore it will not affect the #parent.
Is there a pure CSS way to make a child element fit into parent with stepped (width) values
CSS grid can do it:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 50px); /* your step */
justify-content: center; /* remove if you want left align */
}
h1 {
grid-column: 1/-1; /* take all the possible columns */
/* to demoonstrate the repetition */
padding-bottom: 80px;
background: url(https://picsum.photos/id/1069/50/50) bottom left repeat-x;
}
<div class="wrapper">
<h1>a title</h1>
</div>
Related Topics
Understanding Grid Negative Values
Chrome: Automatic Shift of Web Elements
Making a Custom Input Text Type
Why Does Negative Z-Index and Non-Static Position Disable My Checkbox in Most Browsers
HTML CSS Positions Not Working
CSS - Header - Always Bottom Footer and 100% Content
CSS 2 Div Size Auto Same Height
Nested CSS Grid Layout Different Behavior in Chrome and Firefox
CSS Import or <Link Rel...> with "Media" Attribute
HTML Generated Microsoft Word Document with Header, Footer and Watermark
Any Way of Using Frames in HTML5
How to Set Placeholder Value Using CSS
Internet Explorer 9 Drag and Drop (Dnd)
HTML Table Different Number of Columns in Different Rows