CODEWITHSUNDEEP
css
doqgmui
doqgmui

Reputation: 49

padding right and bottom gone on fixed element

I have a div .modal that has a fixed position with padding: 90px;. There is a div .child inside it with height: 1500px;.

The problem is that the padding right and bottom gone on modal, I have tried to set box-sizing: border-box; but it cannot solve the problem.

If you inspect it, there are negative value applied on position, I don't know why.

.modal {
  background-color: gray;
  height: 100vh;
  padding: 90px;
  position: fixed;
  width: 100vw;
}

.child {
  background-color: orange;
  height: 1500px;
  width: 100%;
}
<div class="modal">
  <div class="child"></div>
</div>

Padding should be present no matter the value of the height of the content.

Upvotes: 0

Views: 31

Answers (2)

Hakim art
Hakim art

Reputation: 9

this will work for you, so basically the padding top and bottom didn't show because the child div was taking the whole height of the page but if you set the height to be for example 800px then it will work.

.modal {
  background-color: gray;
  height: 100vh;
  position: fixed;
  width: 100vw;
  display:flex;
  justify-content: center;
  align-items:center;
}

.child {
  background-color: orange;
  height: 800px;
  width: 100%;
  margin: 90px;
}
<div class="modal">
  <div class="child"></div>
</div>

Upvotes: 0

DCodeMania
DCodeMania

Reputation: 1157

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.modal {
  background-color: gray;
  height: 100%;
  padding: 90px;
  position: fixed;
  width: 100vw;
  overflow: auto;
}

.child {
  background-color: orange;
  height: 1500px;
  width: 100%;
}
<div class="modal">
  <div class="child"></div>
</div>

Try this

Upvotes: 1

Related Questions