Question

我有一个特定的布局，引起了巨大的麻烦。这是一张图片：

enter image description here

我的目标是让“侧面板”始终等于容器的高度。 “注册申请”部分已经达到100％的高度。

当前加价

<body>
    <div id="container" class="pure-g">

        <div class="pure-u-md-1-4 pure-u-1 panel" id="left-panel">
            <div class="panel-row">
                <div class="panel p">
                    <div class="inner-panel">
                        <div class="panel-logo">
                             "Logo here text"
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-row">
                <div class="panel p">
                    <div class="inner-panel">
                        <nav class="panel">

                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div id="right-panel" class="pure-u-md-3-4 pure-u-1 panel p">
            <div class="inner-panel">
                <header class="pure-g">
                    <div class="pure-u-md-1-4 pure-u-1 header-logo">
                        LOGO Would go here, of course.
                    </div>
                    <div class="pure-u-md-3-4 pure-u-1 header-title">
                        <h1>Consumers Energy</h1>
                        <h1><strong>CARE 3.0 Program</strong></h1>
                        <h1>Enrollment Application</h1>
                    </div>
                </header>

                <div id="content">
                    "Enrollment application text..."
                </div>
            </div>
        </div>
    </div>
</body>

当前CSS

.panel {
  box-sizing: border-box;
  height: 100%;
  display: table-cell;
}
.panel.p {
  padding: 3px;
}
.panel .panel-row {
  display: table-row;
}
.panel .inner-panel {
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background-color: red;
}

这是另一个可以玩的小提琴：http://jsfiddle.net/3c3tqo3e/但我真的不想用桌子......

问我们如何堆叠两个div并使其高度= 100％的父级？ “这里的徽标......”部分将是一个自动高度。

注意我真的更喜欢响应友好的答案。我正在使用PureCSS的部分。（这意味着绝对定位不是首选）另外，非常喜欢只是 css / html。谢谢！

Answer 1

我已经为您创建了一个演示版，但它仅适用于所有modern browsers。您可能需要详细阅读flexbox及其demos，以使您的工作在性能和维护方面更有意义。

另请阅读calc() here

HTML：

<main>
    <aside>
        <div class="logo">Logo</div>
        <div class="aside-content">Other Content</div>
    </aside>
    <section>Section</section>
</main>

CSS：

html, body{ height: 100%; }
main{
    height: 100%; background: teal; padding: 2em; box-sizing: border-box;
    display: flex; flex-direction: row; 
}
aside{
    height: inherit; margin: 0 1em 0 0; width: 200px;
}
aside .logo{
    background: #fff; height: 140px;
}
aside .aside-content{
    background: #fff; height: calc(100% - 150px); margin: 10px 0 0 0;
}

main section{
    height: inherit; background: #fff; flex-grow: 2;
}

演示小提琴：http://jsfiddle.net/vpqqyo9L/1/

修改：

这是IE9的一个：http://jsfiddle.net/vpqqyo9L/3/

父节的两个部分100％高度

1 个答案: