css - 根据内容扩展div高度

Question

我正在这个网站上工作:http://www.myfortune3cart.com/journeyfilm/content.cgi

我的问题是，当我缩小移动网站的屏幕时，页脚后面的灰色框不会延伸到页脚框的底部。这是一个屏幕截图:

HTML:

<div id="secondary" class="widget-area clear" role="complementary">
        <div class="sidebar-one ftr-sidebar">
        <aside id="egw-2" class="widget widget_egw"><div style="font-family:Verdana, Geneva, sans-serif; border:3px solid #ffffff;" class="egw-widget  box">
    <img src="http://www.studiobenna.com/jf/wp-content/uploads/2014/10/JF_website_nav_bottom_watch_01.jpg" style="width:100%; height=100%" alt="WATCH" title="WATCH" class="zoom_in"><a style="padding:10px; background: rgba(0,0,0,0.5) ; color:#ffffff; font-size:13px;" class="mask fadein" href="http://journeyfilm.com/watch"><h2 style=" color: #c5c5c3;font-size:16px;">WATCH</h2>
            </a></div>
</aside>        </div>

        <div class="sidebar-two ftr-sidebar">
        <aside id="egw-3" class="widget widget_egw"><div style="font-family:Verdana, Geneva, sans-serif; border:3px solid #ffffff;" class="egw-widget  box">
    <img src="http://www.studiobenna.com/jf/wp-content/uploads/2014/10/JF_website_nav_bottom_buy_01.jpg" style="width:100%; height=100%" alt="BUY" title="BUY" class="zoom_in"><a style="padding:10px; background: rgba(0,0,0,0.5) ; color:#ffffff; font-size:13px;" class="mask fadein" href="http://store.journeyfilm.com/"><h2 style=" color: #c5c5c3;font-size:16px;">BUY</h2>
            </a></div>
</aside>        </div>
                <div class="sidebar-three ftr-sidebar">
        <aside id="egw-4" class="widget widget_egw"><div style="font-family:Verdana, Geneva, sans-serif; border:3px solid #ffffff;" class="egw-widget  box">
    <img src="http://www.studiobenna.com/jf/wp-content/uploads/2014/10/JF_website_nav_bottom_read_01.jpg" style="width:100%; height=100%" alt="READ" title="READ" class="zoom_in"><a style="padding:10px; background: rgba(0,0,0,0.5) ; color:#ffffff; font-size:13px;" class="mask fadein" href="http://journeyfilm.com/read"><h2 style=" color: #c5c5c3;font-size:16px;">READ</h2>
            </a></div>
</aside>        </div>
                <div class="sidebar-four ftr-sidebar">
        <aside id="egw-5" class="widget widget_egw"><div style="font-family:Verdana, Geneva, sans-serif; border:3px solid #ffffff;" class="egw-widget  box">
    <img src="http://www.studiobenna.com/jf/wp-content/uploads/2014/10/JF_website_nav_bottom_hire_01.jpg" style="width:100%; height=100%" alt="HIRE" title="HIRE" class="zoom_in"><a style="padding:10px; background: rgba(0,0,0,0.5) ; color:#ffffff; font-size:13px;" class="mask fadein" href="http://journeyfilm.com/hire"><h2 style=" color: #c5c5c3;font-size:16px;">HIRE</h2>
            </a></div>
</aside>        </div>
    </div>

CSS

#secondary {
    background: none repeat scroll 0 0 rgba(47, 47, 47, 0.85) !important;
    /*height: 100%; - I added this but it pushes the box way too far down. Also tried 'auto'*/
    margin: 0 auto;
    max-width: 1250px;
    min-height: 161px;
    padding: 15px;
    width: 100%;
}

如有任何想法，我们将不胜感激。谢谢!

Answer 1

你的 div <div role="complementary" class="widget-area clear" id="secondary">需要有 <div class="clear"></div>在底部(但在其中)。你有一个在外面，但如果你在里面放一个，它应该可以解决你的问题。

它需要有清晰的 div 的原因是因为你的 div 中的元素 <div role="complementary" class="widget-area clear" id="secondary">都是 float 的。

---

我确实想说我不支持您的 float 元素，因为正确的方法是将它们设置为内联 block ，但那是另一回事。