为什么我的内容溢出容器的底部？

时间：2013-07-21 14:11:19

标签： jquery html css html5

似乎在某个地方设置了div的“最大宽度”（或具有类似效果的东西），但据我所知，没有。然而，容器的底部溢出底部边缘，如下所示：

enter image description here

为什么会这样做，我该如何预防？

更新

这里发生的事情是html5节元素是动态的（以编程方式，通过jQuery）添加到选项卡的内容区域。一些相关的代码：

HTML：

<div id="tabs" class="content-wrapper">
    <ul>
        <li><a href="#tab-Books">Books</a></li>
        <li><a href="#tab-Movies">Movies</a></li>
        <li><a href="#tab-Music">Music</a></li>
    </ul>
    <div id="tab-Books">
        <select id="bookDropDown">
            <option value="Pulitzer">Pulitzer</option>
            <option value="NBCC">National Book Critics Circle</option>
            <option value="NBA">National Book Awards</option>
            <option value="Nobel">Nobel</option>
        </select>
        <div id="BooksContent"></div>
    </div>

CSS：

.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

.wrapper{
    float: left;
    width: 400px;
    margin-left:20px;
    padding-bottom:20px;
}

jQuery的：

$('#BooksContent').html('');
var htmlBuilder = '';

$.getJSON('Content/NBCCJr.json', function (data) {
    $.each(data, function (i, dataPoint) {
        if (IsYear(dataPoint.category)) {
            htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
        } else { 
            htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
                dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
. . .
            htmlBuilder += '</section>';                   
        }
    }); //each
    $('#BooksContent').append(htmlBuilder)
        .find('img').error(function() {
            this.src = "Content/NoImageAvailable.png"
        });
    $('#BooksContent').css('background-color', 'black');
    $('button').button();
}); //getJSONNBCCJr
$largest = 0;
$(".wrapper").each(function () {
    if ($(this).height() > $largest) {
        $largest = $(this).height();
    }
});
$(".wrapper").css("height", $largest);

} // getNatlBookCritics（）

更新2

好的，我将所有CSS添加到我的样式表中，然后更改内容区域的HTML，如下所示：

<div id="BooksContent" class="clearfix"></div>

...而且，感谢Matthew R.，它就像cha [mp，rm] - 谢谢！

有趣的是，我看到asp.net项目带有与此CSS相似的部分实现：

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

1 个答案:

答案 0 :(得分：1)

您的清单可能无法正常清算。如果你有很多浮动元素，这可能会导致渲染错误。当你浮动一个元素时，你正在使该元素“流出”。基本上该元素将忽略其在DOM中的位置，并尝试滑动到您在浮动中设置的一侧。如果包装器内的所有子元素都浮动，则父级不再知道它应该有多高（因为所有元素都不流动）并且它将自身设置为0px高度或最高流入元素的高度。要解决此问题，您需要clearfix。这将告诉浏览器使容器清除其子容器。

相关问题
最新问题