Question

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

HTML code：

<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;
}

fiddle

设置部分并在旁边使用主标签自动展开

2 个答案: