Geek Answers Handbook

Why does the internal DIV follow from the external DIV?

I haven’t been in HTML CSS for a long time, I can’t find a solution to this simple problem.

I have one div inside another. Outer black and inner orange.

enter image description here

My HTML and CSS:

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {
  width: 100%;
  height: 100%;
  margin: 5px;
  background-color: orange;
}
<div id="outer">
  <div id="inner">
  </div>
</div>
Run codeHide result

Why is my internal div splashing out of Outer? How can I fix this without setting fixed sizes?

+4
source share
5 answers

Due to the margin - the width is 100% PLUS. To avoid this, write width: calc(100% - 10px);(= twice margin.) The same for height.

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {

  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  background-color: orange;
}
<div id="outer">
  <div id="inner">
  </div>
</div>
Run codeHide result
+5
source

margin div 5 , divs overflow: show; ( , , div, ), , div .

, overflow: hidden;, , div, , , div , .

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
  overflow: hidden;
}
#inner {

  width: 100%;
  height: 100%;
  margin: 5px;
  background-color: orange;
}
+2

#inner

#inner {
  position: absolute;
  top: 5px;
  bottom:5px;
  left:5px;
  right:5px;
  background-color: orange;
}


body {
  width: 100%;
  height: 1000px;
}

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {
  position: absolute;
  top: 5px;
  bottom:5px;
  left:5px;
  right:5px;
  background-color: orange;
}
<body>
  <div id="outer">
    <div id="inner">
    </div>
  </div>
</body>
Hide result
+2

This is probably because your inner div is pushed out of its parent around the edge. Have you tried to set the “internal” to: absolute with left: 0 and above: 0 property?

+1
source

The answers above assume that you don't want a field. If you really want fields, then you can add overflow: hidden;to #outer.

+1
source

More articles:


All Articles