使用 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 构建两个“单元格”，一个是您的幻灯片，另一个是您的文本容器，其高度必须相同
• 将可变文本部分包装在容器中并使用绝对位置使其适合单元格

css：

#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

Answer 2

这样的？

http://jsfiddle.net/hCHrE/14/

如果我正确理解了您的问题，我所做的只是将容器的高度固定为图像的高度

#box {
background: #EEE;
padding: 25px;
width: 100%;
height:250px;
}

然后使用

设置内部容器以匹配主容器的高度

height:100%;

我也用过

overflow-y:auto;

在内容框上获得一个滚动条。这样可以确保它只在需要时才显示滚动条，而不是一直显示。

所有这一切的唯一缺点是图像必须是静态高度，所以上面的答案可能会更好。

Answer 3

我想通了，但这并不容易。 @dystroy 给了我最初的想法，但不幸的是，他的回答只在 Chrome 中有效。

我警告你，这不漂亮。我使用了一点 Modernizr 来让它在 IE9 中工作（显然 有点 支持 flexbox，但不正确）。

CSS：

<style type="text/css">
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #box {
        margin: 0 auto;
        padding: 0;
        position: relative;
        max-width: 960px;
        /* css3 */
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
    }

    .no-flexbox #box {
    }

        #box figure {
            margin: 0;
            width: 40%;
        }

        .no-flexbox #box figure {
            float: left;
        }

            #box figure img {
                display: block;
                width: 100%;
            }

        #box .relative {
            background: blue;
            min-height: 100%;
            position: relative;
            width: 60%;
        }

        .no-flexbox #box .relative {
            bottom: 0;
            float: right;
            position: absolute;
            right: 0;
            top: 0;
        }

            #box .relative section {
                background: red;
                bottom: 0;
                height: 100%;
                left: 0;
                overflow: auto;
                position: absolute;
                right: 0;
                top: 0;
            }
</style>

HTML：

<div id="box">
    <figure>
        <img src="images/01.png" />
    </figure>
    <div class="relative">
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam sapien. Aenean faucibus bibendum dolor eu suscipit. Quisque non eros a diam tristique tempus. Proin fringilla pellentesque ante quis facilisis. Donec gravida velit et ullamcorper tempor. Nulla facilisi. Praesent non quam enim. Nunc ullamcorper, purus sit amet consequat faucibus, nibh enim faucibus nulla, quis facilisis diam nulla id mauris. Sed viverra justo vel risus rhoncus, at ultricies nulla feugiat. Nam in sapien eget diam malesuada feugiat. Fusce imperdiet volutpat ante. Quisque nisl nibh, placerat ac urna eget, scelerisque condimentum ante. Integer semper nisl nec metus lacinia, at venenatis lectus egestas. Mauris vestibulum suscipit nisi, et interdum velit elementum vitae. Morbi ultricies nisl et erat volutpat tincidunt.</p>
            <p>Mauris tempor nibh ut leo pellentesque, elementum pellentesque mauris cursus. Praesent elementum volutpat eros, vitae condimentum nisl laoreet fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eget erat euismod, interdum nibh vel, posuere nunc. Curabitur quis accumsan dolor. Quisque fermentum urna ligula, quis vulputate nunc scelerisque quis. Pellentesque viverra libero sed urna condimentum, ac dictum neque laoreet. Duis blandit, enim pulvinar convallis aliquam, mi sem blandit eros, vel feugiat sem nisi ac justo. Donec imperdiet lectus massa, eu aliquam ante tincidunt lobortis. Phasellus placerat nisl sit amet nibh ornare accumsan. Donec felis tellus, vestibulum in imperdiet eget, facilisis eu libero.</p>
            <p>Vivamus nec mollis lorem. Quisque ullamcorper elit nec mauris blandit, id consequat sapien aliquet. Suspendisse sit amet felis faucibus, viverra enim vel, hendrerit diam. Morbi iaculis, nunc quis tempor ullamcorper, risus tortor luctus mi, vehicula consectetur turpis tortor eu risus. Aliquam purus felis, lacinia eget egestas vitae, volutpat ac massa. Mauris consectetur cursus adipiscing. Curabitur condimentum vulputate ipsum cursus vulputate. Donec urna nisi, lobortis sed mattis in, cursus eget felis. Pellentesque sed sodales mauris. Nam tellus purus, egestas blandit lacus eu, convallis tincidunt neque.</p>
            <p>Etiam sed cursus diam. Curabitur consequat tincidunt libero sed vestibulum. Mauris tempor lobortis dui, in sollicitudin dolor aliquam et. Curabitur rutrum dolor quis urna adipiscing, vel posuere ipsum cursus. Nullam rutrum, erat quis fermentum pellentesque, diam massa placerat risus, quis rhoncus lectus nunc ut felis. Sed hendrerit faucibus diam, at tempor justo gravida ac. Nunc vulputate augue blandit ligula fermentum cursus. Praesent sit amet odio in mi fringilla lobortis vitae sit amet tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam semper ligula et nisi tincidunt, vitae egestas enim feugiat. Donec at tristique sem. Praesent tristique, dui eget placerat ultrices, lectus libero dignissim magna, quis condimentum ipsum diam sed magna. Etiam scelerisque ornare eros, nec facilisis erat facilisis nec. Sed volutpat erat in convallis sagittis. Aliquam scelerisque magna leo, vel sagittis mauris mollis non. Aenean bibendum pharetra vehicula.</p>
            <p>Cras facilisis elit ac odio consectetur, id eleifend nunc gravida. Nam faucibus vitae dui at luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec lacus enim, tincidunt a nisi nec, venenatis semper nisi. Sed sodales odio id pretium semper. Vivamus quis diam consequat orci elementum dapibus quis vitae neque. Pellentesque sed malesuada mi.</p>
        </section>
    </div><!--/.relative-->
    <div style="clear:both;"></div>
</div><!--/#box-->
<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js" type="text/javascript"></script>

小提琴：

http://jsfiddle.net/9pDv8/

在 IE9-11、Chrome、Firefox、Safari、Android 上的浏览​​器、iOS 上的 Safari 中测试。在所有情况下都能完美运行。它在 IE8 中的降级相当好，根本没有测试 IE7。