Make div bigger then its parent [duplicate]

219
March 01, 2022, at 08:50 AM
This question already has answers here:
Is there are way to make a child DIV's width wider than the parent DIV using CSS? (15 answers)
Closed 20 days ago.

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.

Answer 1

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>

Answer 2

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;
}
Answer 3

Give a certain height & width to your parent.
Use % for the your .child element.

.parent {
  height: 40px;
  width: 40px;
  background: gray;
}
.child {
  height: 125%;
  width: 125%;
  background: transparent;
  border: 1px solid green;
}
<div class="parent">
  <div class="child"></div>
</div>

Answer 4

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.

Rent Charter Buses Company
READ ALSO
How do I stop &quot;Type &#39;/&#39; from your saved info&quot; (on Edge) from appearing on my site&#39;s search field?

How do I stop "Type '/' from your saved info" (on Edge) from appearing on my site's search field?

I recently added a location search field on my site which shows suggestions based on what you type, but on Microsoft edge, a menu pops up on clicking on the input fieldHow can I disable this menu from appearing on just this input field of my site?

195
I want to display the message when I push send button. And want be reset message form

I want to display the message when I push send button. And want be reset message form

I am making a contact form using Reactjs and emailjs, but I input a form that says "Message sent !!" after sending a message and "Failed to send message!" When the message cannot be sent

179
I have two elements placed next to each other, how do I select which one is truncated? [closed]

I have two elements placed next to each other, how do I select which one is truncated? [closed]

Want to improve this question? Update the question so it's on-topic for Stack Overflow

117
How to decide whether to use CSS property &quot;will-change&quot;

How to decide whether to use CSS property "will-change"

Recently I've dived into the topic of CSS animations and transitions

132