Html 当有'；空间不够

当我缩小浏览器窗口或以较小的分辨率访问它时，边栏会覆盖页脚。如本页所示：

我已经尝试了我在网站上找到的每一个建议，但是没有一个对我有效

如果我将“coluna_direita”旁边浮动div的最小高度设置为侧边栏的高度，我会工作，但这并不理想，因为如果我添加其他类别，侧边栏的高度可能会改变。那么，有没有办法将“coluna_direita”div的最小高度设置为动态更改为边栏的任何高度

或者任何其他更简单的解决方案都会很好

多谢各位

编辑：这是一个自定义的商业模板

<div class="wrap_shop">

<?php
/**
 * The Template for displaying product archives, including the main shop page     which is a post type archive.
 *
 * Override this template by copying it to yourtheme/woocommerce/archive-product.php
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

get_header( 'shop' ); ?>


<?php
    /**
     * woocommerce_before_main_content hook
     *
     * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
     * @hooked woocommerce_breadcrumb - 20
     */
    do_action( 'woocommerce_before_main_content' );
?>


    <div id="coluna_direita">

    <div class="resultados">
    <?php
        /**
         * woocommerce_archive_description hook
         *
         * @hooked woocommerce_taxonomy_archive_description - 10
         * @hooked woocommerce_product_archive_description - 10
         */
        do_action( 'woocommerce_archive_description' );
        ?>
        </div> <!--resultados-->

    <?php if ( have_posts() ) : ?>

        <?php
            /**
             * woocommerce_before_shop_loop hook
             *
             * @hooked woocommerce_result_count - 20
             * @hooked woocommerce_catalog_ordering - 30
             */
            do_action( 'woocommerce_before_shop_loop' );
        ?>


        <?php woocommerce_product_loop_start(); ?>


            <?php woocommerce_product_subcategories(); ?>


            <?php while ( have_posts() ) : the_post(); ?>


                <?php wc_get_template_part( 'content', 'product' ); ?>

<?php /*<div id="desejos"><?php echo do_shortcode(   '[yith_wcwl_add_to_wishlist] ' ); ?></div> */ ?>
            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>


        <?php
            /**
             * woocommerce_after_shop_loop hook
             *
             * @hooked woocommerce_pagination - 10
             */
            do_action( 'woocommerce_after_shop_loop' );

        ?>

    <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

        <?php wc_get_template( 'loop/no-products-found.php' ); ?>

    <?php endif; ?>

<?php
    /**
     * woocommerce_after_main_content hook
     *
     * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
     */
    do_action( 'woocommerce_after_main_content' );
?>

</div> <! -- coluna_direita -->
<div id="sidebarshop">
    <div id="side_content">
<?php
    /**
     * woocommerce_sidebar hook
     *
     * @hooked woocommerce_get_sidebar - 10
     */
    /*do_action( 'woocommerce_sidebar' ); */
?>

<?php get_sidebar( 'shop' ); ?>
    </div> <!-- side_content-->
</div> <!-- sidebarshop -->
 <?php get_footer( 'shop' ); ?>
</div>

*/ ?>

浮动导致了问题

不需要更改HTML结构的解决方案：

#container {
    float: right;
    width: 75%;
}

#sidebarshop {
    margin-top: -5px;
    width: 25%;
    float: left;
    background-color: #fff;
    min-height: 100%; /** change from height to min-height **/
}

#coluna_direita {
    /* width: 75%; - moved to container */
    /* float: right;  - moved to container */
    padding-left: 20px;
    min-height: 100%; /** change from height to min-height **/
    margin-top: 15px;
}

如果可以更改HTML结构，请使用flexbox：

HTML:

#内容{
显示器：flex；
}
#酒吧间{
页边顶部：-5px；
宽度：25%；
/*浮动：左；-卸下浮动**/
背景色：#fff；
/*高度：100%；-移除高度，以便边栏在需要时向下推动flexbox**/
}
#科鲁纳迪雷塔酒店{
宽度：75%；
/*浮动：右；-卸下浮动**/
左侧填充：20px；
边缘顶部：15px；
}

谢谢Ori，事情是这样的，这是一个woocommerce模板，我在任何地方都找不到div内容，我想它在一个钩子里，所以我不能在里面移动侧边栏div。添加了一个不需要更改HTML结构的解决方案。我将4000px更改为100%，成功了，编辑你的答案，谢谢。4000px是我测试的遗留物-它应该是最小高度：100%。我也更新了答案。

<div id="content" role="main">  

        <div id="sidebarshop"> <!-- move into #content -->
        </div>

        <div id="coluna_direita">
        </div>

</div>

#content {
    display: flex;
}

#sidebarshop {
    margin-top: -5px;
    width: 25%;
    /* float: left; - Remove the float **/
    background-color: #fff;
    /* height: 100%; - Remove the height, so the sidebar will push the flexbox down when needed **/
}

#coluna_direita {
    width: 75%;
    /* float: right; - Remove the float **/
    padding-left: 20px;
    margin-top: 15px;
}