Question

例如：https://anxietyintheclassroom.org/school-system/resources-for-school-personnel/how-to-work-with-your-colleagues/

我的jquery代码如下。似乎在我SHIFT刷新时，侧边栏是全高，但是有时在加载页面时，侧边栏在其下方有空白空间，并且不是全高。我在做错什么吗？

jQuery(document).ready(function(){
var contentheight = jQuery('.storycontent').outerHeight(true);
jQuery('.page #sidebar').height( contentheight );
jQuery('.page-template-inside-page #sidebar').css("height", 
contentheight);
jQuery('.page-template-inside-page .storycontent').css("height", 
contentheight);
});
jQuery(window).resize(function(){
var contentheight = jQuery('.storycontent').outerHeight(true);
jQuery('.page #sidebar').height( contentheight );
jQuery('.page-template-inside-page #sidebar').css("height", 
contentheight);*


jQuery('.page-template-inside-page .storycontent').css("height", 
contentheight);
});

Answer 1

如果您缩小代码并遵循DRY（ R 不使用 Y 我们自己）原则，通常更容易调试。< / p>

由于#sidebar是ID，因此它应该仅在页面中一次，因此 .page #sidebar'和.page-template-inside-page #sidebar指的是相同的元素，如果您有两个ID为#sidebar的不同元素，则可能是问题的一部分，请考虑改用类。

如果您以更紧凑的方式编写代码，则可以这样编写。

jQuery(()=>{
  function setHeight(){
    jQuery(".page-template-inside-page").find(".storycontent, #sidebar").css({
      height: jQuery('.storycontent, #sidebar').outerHeight(true)
    });
  };
  jQuery(window).resize(setHeight);
  setHeight();
});

以这种方式编写时，您可以看到您采用的外部高度并将其设置为该高度，这是不相同的值。 outterHeight包括边距和填充，高度不包括在内。它还没有考虑到边栏可能会更长

可以像这样更健壮地编写代码。

jQuery(()=>{
  function setHeight(){
    //use Math.max to get the height of the taller element
    const height = Math.max(
       jQuery("#sidebar").height(), 
       jQuery(".page-template-inside-page .storycontent").height()
    );
    //if you need to select more then one element, you can separate them with commas
    jQuery("#sidebar, .page-template-inside-page .storycontent").css({
      height: height
    });
  };
  jQuery(window).resize(setHeight); //call the setHeight function on resize
  setHeight(); //call the setHeight function when the document loads.
});

我没有您的html标记或CSS，如果元素嵌套（一个在另一个内部），请确保内部元素没有顶部或底部填充。

PS。问题是关于如何使用jQuery ...但是使用纯CSS会更容易/更快... https://davidwalsh.name/flexbox-column

Answer 2

这是一个经典问题，在DOM准备就绪但所有资源尚未下载（包括图像）的情况下，JavaScript就会立即渲染。在这种情况下，计算是从初始高度开始的，但是随着资源开始加载，两个元素之间的高度不匹配。

尝试使用：

$(window).on("load",function(){
    // your code goes here
});

希望这对您有所帮助。

使用jQuery使侧边栏与内容的高度相同

2 个答案: