设置部分并放在一边以使用主标签自动扩展

Question

我想将内部和侧边栏设置为最小高度，然后它们应与main标签一起垂直扩展。

HTML代码：

<body>
    <header></header>
    <main>
        <section>
            <section class="innersection">
            some content
            </section>
            <aside class="sidebar">
            snas
           </aside>
        </section>
    </main>
    <footer></footer>
</body>

CSS代码：

main{
    width: 100%;
    min-height: 800px;
}

.innersection{
float:left;
width:94%;
display:inline;
}
.sidebar{
float:right;
width:5%;
display:inline;
}

我试过了，但是没有用。 使用内部区域和侧边栏时， main标签的高度不会增加。 我已附上页面图片 。

Answer 1

我希望我理解正确，您希望.innersection和.sidebar都具有相同的高度，并且都采用其父级的高度吗？

如果是这样，则可以将main > section显示为表格，并将两个子项显示为表格单元。

main{
    width: 100%;
    min-height: 800px;
}
main > section {
    width: 100%;
    display: table;
}
.innersection{
    width:94%;
    height: 800px;
    display:table-cell;
}
.sidebar{
    width:5%;
    display: table-cell;
}

的jsfiddle

Answer 2

尝试这个：

使您的主要职位绝对

main{
    width: 100%;
    min-height: 200px;
    border:1px solid black;
    position:absolute;
}

.innersection{
float:left;
width:94%;
display:inline;
border:1px solid black;
}
.sidebar{
float:right;
width:5%;
display:inline;
border:1px solid black;
}

小提琴

设置部分并放在一边以使用主标签自动扩展

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-09-16 11:29:40

解决方案2
0 2014-09-16 11:24:09

设置部分并放在一边以使用主标签自动扩展

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-09-16 11:29:40

解决方案2 0 2014-09-16 11:24:09

解决方案1
1 已采纳 2014-09-16 11:29:40

解决方案2
0 2014-09-16 11:24:09