Html 将截面和侧边设置为使用主标记自动展开_Html_Css

Html 将截面和侧边设置为使用主标记自动展开

html css

Html 将截面和侧边设置为使用主标记自动展开,html,css,Html,Css,我想将内部部分和侧边栏设置为最小高度，然后它们应该随着main标签垂直展开 HTML代码： <body> <header></header> <main> <section> <section class="innersection"> some content </section> &

我想将内部部分和侧边栏设置为最小高度，然后它们应该随着

main

标签垂直展开

HTML代码：

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

我试过了，但不起作用。对于内部部分和侧栏，

main

标记的高度不会增加。我已附上该页面的图像。

请尝试以下操作：

使你的主要立场成为绝对的

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

我希望我理解正确，您希望

.innersection

和

.sidebar

都具有相同的高度，并且都具有其父级的高度吗

如果是这样，您可以将

main>部分

显示为表格，并将两个子项显示为表格单元格

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

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