CODEWITHSUNDEEP
htmlcss
cak3_lover
cak3_lover

Reputation: 1928

How to completely wrap a div around the child div to avoid overflow?

I'm a beginner and I was playing around with css (code given below)
and I set the yellow div to a 1000px and I thought the blue div would automatically wrap around it given height:100%;
but to my surprise the yellow div seemed to overflow, I tried using the overflow:auto; but it added a scroll bar to prevent the overflow (which is not what I needed)

so is there anyway that the parent blue div always completely wraps around the yellow div no matter if i set it to a 1000px or 100% height using only CSS?

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;

}

#header {
  height: 100px;
  background: black;
  width: 100%;
  position: relative;
}

#rest {
  height: 100%;
  width: 100%;
  background: blue;
  position: absolute;
}


#content {
  width: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  background: yellow;
  height: 1000px;
  position: absolute;

}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="header"></div>
    <div id="rest">
      <div id="content">
      </div>
    </div>
  </body>

</html>

Upvotes: 0

Views: 104

Answers (1)

Temani Afif
Temani Afif

Reputation: 272589

Try like below:

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

#header {
  height: 100px;
  background: black;
  width: 100%;
  position: relative;
}

#rest {
  min-height: 100%; /* update here */
  width: 100%;
  background: blue;
  position: absolute;
}

#content {
  width: 50%;
  margin: auto; /* remove absolute and center with margin */
  background: yellow;
  height: 1000px;
}
<div id="header"></div>
<div id="rest">
  <div id="content">
  </div>
</div>

Upvotes: 1

Related Questions