当没有足够的内容时,侧边栏会超过页脚 space
Sidebar goes over footer when there's not enough space
当我缩小浏览器 window 或以较小的分辨率访问它时,边栏会覆盖页脚。在此页面点赞:
http://tithaty.com.br/?product_cat=mantas_peseiras
我已经尝试了我在网站上找到的所有建议,但没有一个对我有用。
如果我将旁边浮动 div 的最小高度 "coluna_direita" 设置为侧边栏的高度,我会工作,但这并不理想,因为如果我添加侧边栏可能会改变高度另一个类别。那么,有没有办法将 "coluna_direita" div 的最小高度设置为动态更改为侧边栏的任何高度?
或者任何其他更简单的解决方案都很好。
谢谢
编辑:这是一个自定义的 Woocommerce 模板
<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:
<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;
}
当我缩小浏览器 window 或以较小的分辨率访问它时,边栏会覆盖页脚。在此页面点赞:
http://tithaty.com.br/?product_cat=mantas_peseiras
我已经尝试了我在网站上找到的所有建议,但没有一个对我有用。
如果我将旁边浮动 div 的最小高度 "coluna_direita" 设置为侧边栏的高度,我会工作,但这并不理想,因为如果我添加侧边栏可能会改变高度另一个类别。那么,有没有办法将 "coluna_direita" div 的最小高度设置为动态更改为侧边栏的任何高度?
或者任何其他更简单的解决方案都很好。
谢谢
编辑:这是一个自定义的 Woocommerce 模板
<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:
<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;
}