Question

我在使用背景颜色填充整个中心内容（div）时遇到问题。

我想用蓝色填充id body-content的元素，但实际上并没有伸展到全高。

enter image description here

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

Answer 1

试试这个：

#body-content {overflow: hidden;}

强制body-content div包围其浮动的内容。还有其他方法用于封闭浮点数，但这往往是最简单的。

但请注意，由于您的iframe设置为position: absolute;，除了容器上的高度外，什么都不会清除，这很少是一个好主意。漂浮它也会更好。

Answer 2

首先，该代码不会为我生成任何类似的截图（框架位于搜索框顶部，蓝色背景进一步向下）。但是，将position:absolute;样式中的#promo-video替换为float: left;并将另一个float:left替换为#search-boxes会产生类似于您所拥有的内容。

在这种情况下，纠正问题只需在<div style="clear:both;"></div>＆gt;

的结束标记下方添加search-boxes即可。

即。使用浮动来获得所需的布局。

背景颜色不填充整个div

2 个答案: