1

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

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

在此处输入图像描述

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.

4

2 回答 2

3

尝试这个：

#body-content {overflow: hidden;}

这迫使body-contentdiv 环绕其浮动内容。还有其他封闭浮动的方法，但这往往是最简单的。

但是请注意，由于您iframe的设置为position: absolute;，因此除了容器上的高度之外，没有什么可以明确的，这很少是一个好主意。把它也漂浮起来会更好。

于 2013-06-09T12:35:07.080 回答
0

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

在这种情况下，纠正您的问题只需<div style="clear:both;"></div>在结束标记下方添加search-boxes>

即使用浮动来获得你想要的布局。

于 2013-06-09T12:55:38.953 回答