父容器

Question

我从数据库中获取灵活的元素数，并将它们放入列表中。

列表下方有一个容器。此容器应采用父容器的其余高度。

在下面的代码中，您可以看到我当前的结果。 #rightContent中的Div应该取整个休息高度。但我不知道如何。

HTML：

<section>
        <aside>
            I'm a sidebar!
        </aside>
        <main>
            <article id="leftContent">
                <img src="http://fs1.directupload.net/images/150422/6x5qv8ik.png">
            </article>
            <article id="rightContent">
                <h1>Headline</h1>
                <hr>
                <ul>
                    <li>list1</li>
                    <li>list2</li>
                    <li>list3</li>
                </ul>
                <div>
                    <p>
                        a lot of text
                    </p>
                </div>
            </article>
        </main>
    </section>

CSS：

html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        section {
            width: 100%;
            height: 100%;
        }
        section aside {
            position: fixed;
            right: 50px;
            width: 150px;
            background-color: firebrick;
            color: white;
            padding: 25px;
            height: 100%;
        }
        section main {
            position: relative;
            margin-right: 250px;
            left: 0;
            display: block;
            width: auto;
            border: 1px solid yellow;
        }
        section #leftContent {
            position: relative;
            display: block;
            border: 1px solid green;
            padding: 0;
            margin: 0;
            height: auto;
            width: 50%;
        }
        section #leftContent img {
            width: 100%;
            height: auto;
            display: block;
        }
        section #rightContent {
            position: absolute;
            display: inline-block;
            border: 1px solid blue;
            right: 0;
            margin-left: 50%;
            width: 49%;
            height: 100%;
            top: 0;
        }
        section #rightContent div {
            border: 1px solid violet;
            position: relative;
            margin-bottom: 0;
        }

http://jsfiddle.net/kzkpLg11/

此图像显示了我想要的内容。

Answer 1

你可以这样做：http://jsfiddle.net/kzkpLg11/1/

涉及一些额外的元素，但浏览器支持将是正常的。它基本上都是关于这块CSS的。但我建议你看看小提琴。

.table {
    display: table;
    width: 100%;
    height: 100%;
}

.row {
    display: table-row;

}
.cell {
    display: table-cell;
}

您也可以使用Flexbox解决此问题。但这可能有点棘手。