jquery - 使用 CSS 使一个部分匹配另一个部分的高度

Question

我正在构建一个响应式网站，但我在主页上遇到了困境。我有两个盒子:一个幻灯片和一个装满事件的盒子。这些框需要始终保持相同的高度，幻灯片始终是事件框的最大高度。如果事件框包含的内容多于幻灯片，它只会添加一个滚动条。

我实际上使用了一些 jQuery 来完成这项工作，但我真的更喜欢只使用 CSS。如果它在 IE8 和更低版本上不能正常工作，那也没关系。

这是我要删除的脚本:

<script type="text/javascript">
    // fixes slideshow and events responsiveness
    function slideshowEventsResponiveness() {
        var figureHeight = $("main > figure").outerHeight();
        var pageMargin = parseInt($(".page").css("marginTop")) + parseInt($(".page").css("marginBottom"));
        $(".page").outerHeight(figureHeight - pageMargin);
        var pageHeaderHeight = $(".page").children("header").outerHeight();
        var pageFooterHeight = $(".page").children("footer").outerHeight();
        $(".scroll").outerHeight(figureHeight - pageHeaderHeight - pageFooterHeight - pageMargin);
    }
    $(document).ready(function() {
        slideshowEventsResponiveness();
    });
    $(window).resize(function() {
        slideshowEventsResponiveness();
    });
</script>

这是主页的标记:

<main>
    <figure>
        <section class="bjqs">
            <figure>
                <img src="images/static/sledders.jpg" />
                <figcaption>
                    <h6>Winter Fun!</h6>
                    <p><a href="#">Sledding</a> | <a href="#">Ice Hockey</a> | <a href="#">Ice Skating</a> | <a href="#">Cross Country Ski &amp; SnowShoe Rental</a></p>
                </figcaption>
            </figure>
            <figure>
                <img src="images/static/sledders_inverted.jpg" />
                <figcaption>
                    <h6>Winter Fun!</h6>
                    <p><a href="#">Sledding</a> | <a href="#">Ice Hockey</a> | <a href="#">Ice Skating</a> | <a href="#">Cross Country Ski &amp; SnowShoe Rental</a></p>
                </figcaption>
            </figure>
        </section><!--/.bjqs-->
    </figure>
    <section class="page">
        <header>
            <h1>Latest News &amp; Events</h1>
        </header>
        <section class="scroll">
            <article>
                <header>
                    <h1><a href="#"><time>2/10</time> - Ice Skating &amp; Sledding Conditions</a></h1>
                </header>
                <p>
                    Krape Park Sled Hill - OPEN<br />
                    Read Park Ice Rink - OPEN
                </p>
            </article>
            <article>
                <header>
                    <h1><a href="#"><time>2/1</time> - Registration Now Open</a></h1>
                </header>
                <p>Now taking registration for programs taking place through March 2014. <a href="#">Click here</a> to download a complete copy of the Spring/Summer Program Guide.</p>
            </article>
            <article>
                <header>
                    <h1><a href="#"><time>1/28</time> - Winter Activities in Freeport</a></h1>
                </header>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas orci ac interdum pharetra.</p>
            </article>
            <article>
                <header>
                    <h1><a href="#"><time>1/28</time> - Lorem ipsum dolor sit amet</a></h1>
                </header>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas orci ac interdum pharetra.</p>
            </article>
            <article>
                <header>
                    <h1><a href="#"><time>1/28</time> - Lorem ipsum dolor sit amet</a></h1>
                </header>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas orci ac interdum pharetra.</p>
            </article>
            <article>
                <header>
                    <h1><a href="#"><time>1/28</time> - Lorem ipsum dolor sit amet</a></h1>
                </header>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas orci ac interdum pharetra.</p>
            </article>
        </section><!--/.scroll-->
        <footer>
            <a class="button" href="#">View All News</a>
        </footer>
    </section><!--/.page-->
</main>

如果我当前的 CSS 有帮助，我可以提供，请告诉我。

我的目标截图:

更新:这是一个非常简单的 JS Fiddle:http://jsfiddle.net/hCHrE/

这不是完全相同的标记，但它应该工作相同。

Answer 1

你可以的

• 使用 display:table-row 和 display:table-cell 构建两个“单元格”，一个是您的幻灯片，另一个是您的容器必须采用相同高度的文本
• 将可变文本部分包裹在容器中并使用绝对位置使其适合单元格

样式:

#box {
    display:table-row;
}
#a, #box figure {
     display: table-cell;
}
#a { /* #a wraps your section */
    position: relative;
}
#box figure {
    margin: 0;
    width: 30%;
}
#box figure img {
    display: block;
    width: 100%;
}
#box section {
    position: absolute;
    top:0;right:0;left:0;bottom:0;
    overflow-y:scroll;
}

Demonstration