保持侧边栏与内容高度相同

Question

我正在制作一个典型的 wordpress 主题，基于 twentysixteen。

我试图将.sidebar div 与.content-area div 一样长。纯 CSS 解决方案（如 flexbox）对我不起作用，原因有很多。

所以...这是我的 jQuery 函数：

    window.sidebarSize = function(){ 
    ( function( $ ) {
        var sidebar = $('.sidebar');
        var contentArea = $('.content-area');
        var viewportWidth = $(window).width();

        //only if sidebar is next to contentarea
        if (parseInt(viewportWidth) >= 910){
                //if sidebar is longer than the content
                if(parseInt(sidebar.outerHeight(true)) > parseInt(contentArea.outerHeight(true))){
                    sidebar.css('height',''); //reset sidebar height to its minimum
                // else, sidebar is shorter than content
                } else {
                    sidebar.css('height',contentArea.outerHeight(true)); //make its height the same

                }
        }
    } )( jQuery );

};

这是这样称呼的：

jQuery(function($) {    
//a bunch of event handlers here because I'm not sure which of these work
$(window).on('window.onload window.onresize load resize', function() {
    window.sidebarSize();
});

上述方法有效，尽管有时会出现问题，并且在我刷新页面之前它不会适用。

但现在我有另一个问题。

有时，内容的大小会动态变化（我使用Collapse-O-matic 插件来折叠画廊和常见问题解答），我希望侧边栏也能效仿。

我尝试了很多解决方案，但都失败了。目前我正在使用this script，但它并不总是有效，正如我所描述的here。

特别是在常见问题页面中，内容高度可以连续多次以多种方式变化，脚本会变得很糟糕，侧边栏的长度会开始看起来不连贯。

任何关于这些脚本可以改进的地方的建议都将非常感激。我有点 JavaScript 菜鸟。

Answer 1

您在前端有动态内容，这意味着某些内容是隐藏的，然后在单击（或其他事件控件）时显示出来。该动态内容将影响其父容器的高度。

如何在动态内容显示时将容器高度调整为相同？

您将需要监听更改内容的事件。换句话说，当打开该内容的控件被单击时，您希望为该事件添加一个侦听器。

为什么？然后当内容向下扩展改变高度时，您的高度设置脚本可以重新调整两列的 CSS。

实施

使用来自二十六主题的 HTML 和 CSS 标记，这是一个动态内容的示例。这个JSFiddle example 添加了一个常见问题内容揭示器。

这是自动调整内容区域和侧边栏的列高的脚本。

/*!
* This script adjusts the column heights
*/
(function($, window, document){
    "use strict";

    var $contentArea, 
        $sidebar;

        var init = function() {
        $contentArea = $('#primary');
        $sidebar = $('#secondary');
        $('.faq-question').on("click", setHeights);
        setHeights();
    }

    var setHeights = function() {
        clearHeights();
        var height = getHeight();

        $sidebar.css('height', height);
        $contentArea.css('height', height + 40);
    }

    function clearHeights() {
        $sidebar.css('height', '');
        $contentArea.css('height', '');
    }

    function getHeight() {
        var contentHeight = $contentArea.outerHeight(true),
            sidebarHeight = $sidebar.outerHeight(true);

       return contentHeight > sidebarHeight
           ? contentHeight
           : sidebarHeight;
    }

    $(document).ready(function(){
        init();
    });

}(jQuery, window, document));

当您点击问题时，答案就会显示出来。这样做时，内容容器的高度会发生变化。该脚本正在侦听该单击事件。点击后会重新触发setHeights()函数。

如何添加点击监听？

对于您正在使用的插件，您需要查看它打开和关闭内容的目标。然后您可以添加自己的事件来重新触发设置高度。

Answer 2

您真的不需要为此编写解决方案脚本。你也不需要 CSS flexbox 或浮动。

所有你需要做的：

1. 将您希望.sidebar 拥有的body 提供给background-color；
2. 将position: absolute 添加到.sidebar；
3. 给.content-area 一个min-height 的100vh，它自己的background-color 和对应于.sidebar 的预期宽度的边距

工作示例：

body {
margin: 0;
background-color: rgb(255,255,0);
}

.content-area {
display: block;
background-color: rgb(255,0,0);;
margin-right: 29%;
min-height: 100vh;
}

.sidebar {
display: block;
position:absolute;
top: 0;
right: 0;
width: 27%;
padding: 12px;
}

h1, h2 {
margin: 0;
padding: 12px;
}

<main class="content-area">
<h1>I am the main content area</h1>
</main>

<aside class="sidebar">
<h2>I am the sidebar</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</aside>

注意 上面布局中的隐含假设是，一旦.content-area 高于视口的高度，.sidebar 将永远不会高于.content-area。