배경색이 전체 div를 채우지 못함

Question

전체 가운데 내용 (div)을 배경색으로 채우는 데 문제가 있습니다.

id가 body-content 인 요소를 파란색으로 채우고 싶지만 실제로는 전체 높이로 늘어나지 않습니다. clear이 항목이 정상적으로 작동 부동하게 사용하는 것을 내가 문제를 찾고 시도하고 해결책을 발견

CSS code

#search-boxes{ 
    margin: 40px; 
    display: inline-block; 
    float: right; 
    margin-right: 8%; 
    clear: both; 
    width: 450px; 
} 

#search-panel{ 
    border: 6px solid #c6e7f8; 
} 
#search-panel{ 
    text-align: center; 
    padding: 30px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    width: 400px; 
    background-color: #ffffff; 
    font-family: "Segoe UI Semibold", sans-serif; 
} 

#search-boxes select{ 
    width: 100%; 
    height: 30px; 
} 

#promo-video{ 
    position: absolute; 
    margin-left: 8%; 
    border: 6px solid #d9d9d9; 
} 

#body-content{ 
    background-color: #e9f6fc; 
/* background: linear-gradient(to bottom, #e9f6fc 50%, white); 
    background: -webkit-linear-gradient(to bottom, #e9f6fc 50%, white); 
    background: -moz-linear-gradient(to bottom, #e9f6fc 50%, white); 
    background: -o-linear-gradient(to bottom, #e9f6fc 50%, white); 
*/ margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    padding: 40px; 
    vertical-align: middle; 
} 

<div id="body-content"> 

<iframe id="promo-video" width="40%" height="315" src="" frameborder="0" allowfullscreen style="margin-bottom: 20px;"></iframe> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function(){ 
    var y_pos = $('#search-panel').position().top; 
    $('#promo-video').css('top',y_pos); 
    }); 
    function sho(a){ 
     if (a=='1'){ 
      document.getElementById('criteria-1').style.display = "block"; 
      document.getElementById('criteria-2').style.display = "none"; 
      document.getElementById('criteria-3').style.display = "none"; 
     } 
     else if (a=='2'){ 
      document.getElementById('criteria-1').style.display = "none"; 
      document.getElementById('criteria-2').style.display = "block"; 
      document.getElementById('criteria-3').style.display = "none"; 
     } 
     else if (a=='3'){ 
      document.getElementById('criteria-1').style.display = "none"; 
      document.getElementById('criteria-2').style.display = "none"; 
      document.getElementById('criteria-3').style.display = "block"; 
     } 
    } 
</script> 
<div id="search-boxes"> 

    <div id="search-panel"> 
    <form id="search-form" name="search-form" onsubmit="return false;"> 
    <fieldset style="margin-bottom:8px;"> 
    <legend><i>Find By</i></legend> 
     <input type="radio" name="sp" onclick="sho(1);" checked/>A 
     <input type="radio" name="sp" onclick="sho(2);"/>B 
     <input type="radio" name="sp" onclick="sho(3);"/>C 
    </fieldset> 
    <p> 
      <select name="spe" id="criteria-1"> 
       <option value="g">G</option> 
       <option value="c">C</option> 
       <option value="ge">Ge</option> 
      </select> 
      <input type="text" style="width:97%;vertical-align:center;display:none;height:24px;padding-left:8px;" placeholder="Or find a.." id="criteria-2"/> 
      <input type="text" style="width:97%;vertical-align:center;display:none;height:24px;padding-left:8px;" placeholder="Or find b.." id="criteria-3"/> 
    </p>   
      <select name="city" style="width:49%;"> 
       <option value="any-city">In City</option> 
       <option value="mumbai">Mumbai</option> 
       <option value="nyc">New York</option> 
      </select> 
      <select name="locality" style="width:49%;"> 
       <option value="anywhere">Near Area</option> 
       <option value="vasant-vihar">Vasant Vihar</option> 
       <option value="andheri">Andheri</option> 
      </select> 
      <br><br> 
     <input type="submit" class="button_g" name="submit-search" value="Search for A"> 
    </form> 
    </div> 
</div><!-- End of Search boxes --> 

</div><!-- End of body content --> 

HTML code

. 그러나 그것도 작동하지 않습니다. 내가 뭘 놓치고 있니?

다른 문제점은 I가 50 %의 높이까지 연장 청색 원 선형 그라데이션했지만, 청색 전체 body-content 채우고 때 90 %, 개까지 채운다.

Answer 1

이 시도 :

는

#body-content {overflow: hidden;} 

의 떴다 내용의 주위에 포장하는 body-content 사업부를 강제로 그. 수레를 둘러 쌀 수있는 다른 방법이 있지만 가장 쉬운 경향이 있습니다.

그러나 iframe이 position: absolute;으로 설정되었으므로 컨테이너의 높이를 제외하고는 아무 것도 표시되지 않으므로 이는 거의 좋은 아이디어가 아닙니다. 그것도 떠 다니는 것이 낫습니다.

Answer 2

먼저이 코드는 저를위한 스크린 샷과 같은 것을 생성하지 않습니다 (프레임은 검색 상자 위에 있고 파란색 배경은 더 내려갑니다). position:absolute;을 #promo-video 스타일로 바꾸고 float: left;으로 바꾸고 다른 하나를 float:left에서 #search-boxes으로 추가하면 갖고있는 것과 비슷한 것이 생성됩니다. 그 상황에서

, 당신의 문제를 수정하는 것은 단순히 search-boxes>

즉 사용에 대한 닫는 태그 아래 <div style="clear:both;"></div>을 추가하는 문제입니다 당신이 원하는 레이아웃을 얻을 수레.