is there any way how can I make div bigger then its parent? I know its bad practice. Basically I have div that is small and I need to create div inside which will be through entire window. But cant find way how to do it. Thanks for any help.
You need to "pop" that element from normal flow with position rule with specified dimensions. E.g. position: fixed;
.outer {
width: 10vw;
height: 10vh;
position: relative;
background: rgba(130, 130, 255, .3);
border: 1px solid red;
}
.inner {
width: 90vw;
height: 90vh;
position: absolute;
left: 5px;
top: 5px;
background: rgba(130, 255, 130, .3);
border: 1px solid green;
}<div class="outer">
<div class="inner"></div>
</div>Alternative
Have overflow: visible with specified dimensions
.outer {
width: 10vw;
height: 10vh;
position: relative;
background: rgba(130, 130, 255, .3);
border: 1px solid red;
overflow: visible;
display: inline-block;
vertical-align: top;
}
.inner {
width: 90vw;
height: 90vh;
margin: 5px;
margin: 5px;
background: rgba(130, 255, 130, .3);
border: 1px solid green;
}<div class="outer">
<div class="inner"></div>
</div>You can do it easily. As long as the parent doesn't have overflow: hidden, you can even define its dimensions with pixels and see it working!
.parent {
height: 40px;
width: 40px;
background: red;
}
.child {
height: 100px;
width: 100px;
background: transparent;
border: 1px solid green;
}<div class="parent">
<div class="child"></div>
</div>If you want it over the entire screen, you can use vh and vw:
.child {
height: 100vh;
width: 100vw;
background: transparent;
border: 1px solid green;
}
You can use absolute sizing in CSS to have a child div be larger than the parent. You will also need to add in the top and left attributes and set them to 0. This will frame the div to begin in the top left corner.
If you want a div to be the full width and height of the viewport, use the following CSS:
.parent {
position: relative;
width: 120px;
height: 120px;
border: 1px solid red;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
border: 1px solid blue;
}<div class='parent'>
<div class='child'>
</div>
</div>This will allow the div to resize based on the user's screen dimensions.
More on CSS sizing can be found here.