誰かが助けて、次のコードが機能しない理由を説明できますか? 理由がわかりません... 私にとっては、すべてが機能しているはずです。
jQuery(window).load(function($){
if (window.matchMedia("(min-width: 768px)").matches) {
var sideHeight = $('.mainContent').css('height');
$('.sidebar').css('height', sideHeight);
}
});
これは、動作する CSS 部分だけの jsfiddle です。https://jsfiddle.net/24r9cax6/
その関数にアラートを入れてメディア マッチ パーツをテストしたところ、window.load でアラートをポップすることができましたが、CSS コードが機能しません。CSS コードを Web サイトで実行して、サイドバーをメイン コンテンツと同じ高さにすることができませんでした。js を head と body の最後に配置しました。変化なし。
サイトはWPで構築されています。コンテンツは動的にロードされるので、コンテンツがロードされる前に高さを実行していると思っていましたが、それは window.load() が修正するはずですよね?
こちらのサイトの記事が参考になります。サイドバーを mainContent div と同じ高さにして、灰色の背景がページの下まで続くようにします。ただし、タブレット サイズ以上でのみ (ブートストラップを使用)。
http://www.businesstransitionandexitplanning.com/turning-business-income-into-retirement-income/