根据内容扩展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设为clear是因为div <div role="complementary" class="widget-area clear" id="secondary">中的项目都是浮动的。

---

我想说我不支持你的浮动元素，因为正确的方法是将它们设置为内联块，但这是一个不同的故事。

Answer 2

这就是问题所在：

.footer-content { width:100%; max-width:1280px; margin:0 auto; padding:5px 0px 151px; }

你的底部填充量为151px。拿出来看起来对我来说很好。