Question

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

我试图保持.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。

特别是在FAQ页面中，内容高度可以连续多次以多种方式改变，脚本只会变成香蕉，侧边栏的长度看起来会变得不连贯。

关于这些脚本可以改进的地方的任何建议都将非常感激。我是一个javascript noob。

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));

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

如何添加点击监听器？

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

Answer 2

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

您需要做的一切：

向body background-color提供您希望.sidebar拥有的position: absolute;
将.sidebar添加到.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>的预期宽度相对应的保证金

工作示例：

＆＃13;

.sidebar

＆＃13;

.content-area

＆＃13;

NB 上面布局中隐含的假设是.content-area永远不会高于{{1}}，一旦{{1}}高于身高的视口。

保持侧边栏与内容

2 个答案:

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

实施

如何添加点击监听器？