背景颜色不会填充整个div [英] background color not filling entire div

问题描述

我在用背景色填充整个中心内容(div)时遇到问题。

我要用蓝色填充ID为body-content的元素，但它实际上没有拉伸到完全高度。

HTML code

<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 -->

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;
}

我尝试搜索该问题并找到了解决方案，即应使用clear使浮动项正常运行。但这也行不通。我错过了什么？

另一个问题是线性渐变，我希望蓝色延伸到50%的高度，但当蓝色填满整个body-content时，高度会达到90%。

推荐答案

尝试此操作：

#body-content {overflow: hidden;}

这会强制body-contentdiv环绕其浮动内容。还有其他封闭浮点数的方法，但这往往是最简单的方法。

但是，请注意，因为iframe被设置为position: absolute;，所以除了容器上的高度(这通常不是一个好主意)之外，没有任何内容会被清除。最好也将其浮动。

这篇关于背景颜色不会填充整个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！