Set section and aside to expand automatically with main tag
Question
I want to set inner-section and sidebar to some min-height and then they should expand vertically along with main tag.
HTML code:
<body>
<header></header>
<main>
<section>
<section class="innersection">
some content
</section>
<aside class="sidebar">
snas
</aside>
</section>
</main>
<footer></footer>
</body>
CSS code :
main{
width: 100%;
min-height: 800px;
}
.innersection{
float:left;
width:94%;
display:inline;
}
.sidebar{
float:right;
width:5%;
display:inline;
}
I tried it but it is not working. With inner-section and sidebar the height of main tag is not increasing. I have attached a image of the page .
2 answers
solution1
1 ACCPTED 2014-09-16 11:29:40
I hope I understand correctly, you want .innersection and .sidebar to both have the same height, and both take the height of it's parent?
If so, you could display main > section as a table and the both children as table-cells.
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;
}
solution2
0 2014-09-16 11:24:09
Try this:
Make your main position as absolute
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.