سلام
من کدهای زیر را نوشته ام
<div class="container wrapper">
<header>
<div class="row">
<div class="col-8 bg-dark">1</div>
<div class="col-4 bg-info">2</div>
</div>
</header>
<main class="">@RenderBody()</main>
<footer class="">
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 بیشتر است وداخل ان قرار نمیگیرد
<main class="row">@RenderBody()</main>
سلام
متاسفانه درست نشد
سلام، دقیقا متوجه منظورتون نشدم ولی اگرمیخواهید که اندازه بکگراند با قرار گرفتن محتوا تغییر کند، نباید header ارتفاع مشخصی داشته باشد
و شما در استایل برای header ارتفاع 100px در نظر گرفتید.
سلام
به عکس دقت کنید می بینید div های 1و2 طولشان بیشتر از ولدشان شده است
برای حل این مشکل باید چکار کنم
متوجه شدم، این مشکل به دلیل وجود کلاس row بعد از تگ header هست به دو صورت میتونید مشکل رو حل کنید
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
<header>
<div class="col-8 bg-dark">1</div>
<div class="col-8 bg-dark">2</div>
</header>
</div>
</div>
</div>
---------------------------------------------------------
<div class="container wrapper">
<div class="row">
<header>
<div class="col-8 bg-dark">1</div>
<div class="col-8 bg-dark">2</div>
</header>
</div>
</div>
موفق باشید.
سلام
متاسفانه مشکل حل نشد
دوست عزیز متاسفانه به کد کامل قالب شما دسترسی نداریم. و نمیدونیم دقیقا چی بکار بردی
ممکنه همون RenderBody یه تگی تزریق میکنه که نیاز به یه کلاس داره.
سعی کن خودت با آزمون خطا حل کنی
نتونستی با anydesk حل کنیم
سلام، اگر مشکل بیرون زدگی دوتا div داخل row هست، این به خاطر خاصیت margin کلاس row هستش اگر از bootstrap4 استفاده میکنید ،کلاس m-0 میتونه مشکل رو برطرف کنه
<div class="row m-0">
<div class="col-2 bg-info">1</div>
<div class="col-3 bg-dark">2</div>
</div>
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)