子元素似乎不是子元素

Question

我为容器内的下拉阴影创建了一个div，但它似乎不是容器的子级。我的网站：http://ps4news.eu.pn/homepage.html (学校用的)。我把它缩小了，这样你就能知道哪里出了问题。我去掉了容器的高度，所以它的长度和需要的一样长，但当我对下拉阴影做同样的操作时，容器似乎会收缩到下拉阴影div的最大尺寸。但是，下拉阴影div是容器元素的子元素，而容器中的所有其他div都不会影响容器，只有这个div会影响容器。那么我需要做什么才能让它和contianer一样长呢？

编辑:下拉阴影实际上只有11个像素长(我指的是图像)。但是它似乎在头部停止的地方停止了。

如果你是这个意思，好吧：

body { 
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}

#Container {
z-index:999999;
width: 1350px;
background-color:#CCC;
position:relative;
}

#DropDownShadow {
width: 1015px;
z-index:-9999;
margin-right: auto;
margin-left: auto;
background-image: url(../images/bgdropshadow.jpg);
background-repeat: repeat-y;
}

#Wrapper {
width: 975px;
height: auto;
margin-left: auto;
margin-right: auto;
}

#ContentHolder {
width:975px;
background:#0F0;
margin-left:auto;
margin-right:auto;
}

#Header {
height: 125px;
margin-right: auto;
margin-left: auto;
background-color: #000;
width: 975px;
}

#Social-Networks {
height:36px;
width:164px;
margin-right:230px;
margin-top:80px;
float:right;
}

#Social-Networks img {
opacity:1;  
}

#Social-Networks img:hover {
opacity:0.9;
}

#ContentHolder1 {
width:650px;
height:925px;
margin-left:42px;
margin-right:auto;
margin-top:-10px;
background-color:transparent;
color: #8B8B8B;
}

#Side-Content {
width:250px;
height:600px;
float:right;
background-color:transparent;
}

#Content1 {
width: 725px;
height:1235px;
color: #9B9B9B;
margin-top:-18px;
margin-left:5px;
background-color: #03C;
border-radius: 4px 0px 0px 0px;
text-align: center;
font-family: "Open Sans";
}

hr {
height: 1px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 4px;
}

#Copyright {
position:absolute;
bottom:0;
height: 25px;
width: 975px;
margin-right: auto;
margin-left: auto;
background-color: #0000d3;
text-align:left;
font-family:"Open Sans";
overflow:hidden;
}

<div id="Container">
  <div id="DropDownShadow">
    <div id="Wrapper">
      <div id="Header"> <img src="images/Header.png" width="400" height="95" 
  style=
  "position: absolute; 
  left: 189px;
  top:10px;">
        <div id="Social-Networks"><a href="http://www.playstation.com" title="Officiële Playstation-Website" target="_blank"><img id="Playstation" src="images/icons/Playstation-logo.png" width="36" height="36"></a><a href="https://www.youtube.com/user/PlayStation" title="Officiële Playstation Youtube Kanaal" target="_blank"><img src="images/icons/1387937374_Youtube.png" width="36" height="36" style="margin-left:5px;"></a><a href="https://twitter.com/PlayStation" title="Officiële Playstation Twitter" target="_blank"><img src="images/icons/1387937314_Twitter.png" width="36" height="36"
          style="margin-left:5px;"></a><a href="https://www.facebook.com/PlayStation" title="Officiële Playstation Facebook" target="_blank"><img src="images/icons/1387947454_Facebook.png" width="36" height="36" style="margin-left:5px;"></a></div>
      </div>
      <div id="ContentHolder">
        <div id='cssmenu'>
          <ul>
            <li class='active'><a href='homepage.html'><span>Home</span></a></li>
            <li class='has-sub'><a href='#'><span>Artikelen</span></a>
              <ul>
                <li class='has-sub'><a href='#'><span>Nederlands</span></a> </li>
                <li class='has-sub'><a href='#'><span>Engels</span></a> </li>
              </ul>
            </li>
            <li><a href='gallery.html'><span>Galerij</span></a></li>
            <li style="float:right" class='last'><a href='#'><span>Over</span></a></li>
            <li style="float:right" class='has-sub'><a href='#'><span>Contact</span></a></li>
          </ul>
          <div id="Side-Content"> 
            <script type="text/javascript" src="http://output78.rssinclude.com/output?type=js&amp;id=815822&amp;hash=b0095ae8bebb910e5dc0f397a646173e"></script>
          </div>
          <div id="ContentHolder1">
            <h1>Gallerij</h1>
            <div id="Gallery">
              <header>Welcome to my Gallery</header>
              <section>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-02.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-02.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-03.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-03.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-04.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-04.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-05.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-05.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-06.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-06.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-07.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-07.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-08.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-08.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
                <li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
              </section>
              <footer>All Rights Reserved</footer>
              <!-- Add jQuery library --> 
              <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
              <!-- Add fancyBox -->
              <link rel="stylesheet" href="images/gallery/source/jquery.fancybox.css" type="text/css" media="screen" />
              <script type="text/javascript" src="images/gallery/source/jquery.fancybox.pack.js"></script>
              <link rel="stylesheet" href="images/gallery/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
              <script type="text/javascript" src="images/gallery/source/helpers/jquery.fancybox-thumbs.js"></script> 
              <script type="text/javascript">
  $(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0,
    prevEffect  : 'none',
    nextEffect  : 'none',
    helpers  : {
      title  : {
        type: 'outside'
      },
      thumbs  : {
        width  : 50,
        height  : 50
      }
    }
    });
</script> 
            </div>
          </div>
        </div>
        <div id="Copyright">&copy;Copyright Mounteder Abdulrazag, Tom Borghouts</div>
      </div>
    </div>
  </div>
</div>

Answer 1

您应该尝试将overflow: hidden;添加到容器中，这样大小就不会改变。