سلام
من کدهای زیر را نوشته ام
<divclass="container wrapper">
<header>
<divclass="row">
<divclass="col-8 bg-dark">1</div>
<divclass="col-4 bg-info">2</div>
</div>
</header>
<mainclass="">@RenderBody()</main>
<footerclass="">
11111
</footer>
</div>
و
html {
box-sizing: border-box;
}
html *,
html *::after,
html *::before {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
min-height: 100%;
font-family: 'BYekan';
}
ul {
list-style: none;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
header {
height: 100px;
background-color: cornsilk;
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
footer {
background-color: #D7E4E4;
text-align: center;
color: #284040;
height: 50px;
}
اما در header وقتی divهارا قرار میدهم از اندازه header بیشتر است وداخل ان قرار نمیگیرد
Untitled.png