سوال: پر نشدن خاصیت height در یک div [بایگانی]

woeful

چهارشنبه 27 آذر 1392, 20:04 عصر

سلام

من یه کد ساده نوشتم که با عکس مشکل من رو میبینید :

این کد ساده زیر :

<html>
<head>
<style>
.contain{
background:black;
padding:80px;
width: 1100px;
}
.right{
direction:rtl;
width:67%;
background-color:red;
padding-right:2%;
float:right;
}
.a{
border : 1px solid #ccc;
background-color:white;
border-radius:5px;
}

</style>
</head>
<body>
<div class="contain">
<div class="right">
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
</div>
</div>
</body>
</html>

در عکس زیر همون طور که میبینید div مشکی (کلاس contain ) با افزایش ارتفاع div های داخلی ارتفاعش زیاد شده
http://www.uplooder.net/img/image/91/074d068ababe2ce480997031989cfb30/1.jpg

حالا در کد بالا در قسمت استایل ها فقط من float:right; به کلاس right اضافه میکنم حالا عکس زیر رو ببینید :
http://www.uplooder.net/img/image/66/74f5737b3d0074053777e767f4dc2e34/2.jpg

چرا div مشکی رنگ ارتفاعش کم میشه و به اندازه ارتفاع محتویاتش نمیشه ؟

ممنون

meysam1366

چهارشنبه 27 آذر 1392, 20:13 عصر

سلام دوست عزیز

شما به جای float

clear:both; بده شاید درست شه و height رو هم auto قرار بده

امیدوارم مشکلتون حل بشه

woeful

چهارشنبه 27 آذر 1392, 20:57 عصر

سلام دوست عزیز

شما به جای float

clear:both; بده شاید درست شه و height رو هم auto قرار بده

امیدوارم مشکلتون حل بشه

ممنون از جواب اما فک کنم مشکلم رو دقیق متوجه نشدید من میخام div با کلاس right ( قرمز رنگه‌ ) بیاد سمت راست بنابراین از float:right استفاده کردم و اگه به کد نگا کنید div با کلاس right داخل div با کلاس contain هست بنابراین اون div با رنگ مشکی باید کل div با رنگ قرمز رو بگیره مثل عکس اولیه با این وجود که div قرمز رنگ مثل عکس دوم بیاد سمت راست ولی نمیشه

من به کلاس contain ارتفاع auto دادم درست نشد ( البته فک می کنم به صورت پیشفرض اگه ارتفاع ندی همون auto بشه ) برای clear:both هم فک میکنم مربوط به اینجا نمیشه ولی منظورتون به کجا یا کدوم کلاس اضافه کنم؟

بازم از جوابتون ممنون

woeful

پنج شنبه 28 آذر 1392, 12:05 عصر

.................

Javidhb

پنج شنبه 28 آذر 1392, 13:25 عصر

روش اول:
css

.contain:after{
clear:both;
content: "";
display: block;
} }

روش دوم با css و html:

<body>
<div class="contain">
<div class="right">
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
</div>
<div style="clear: both"></div> 
</div>
</body>

در واقع هر دو روش یکی هستن.. ( یه المنت باید اضافه بشه که استایل clear:both رو داشته باشه)
اما روش اول ساده تر و تر تمییزتره (البته حواستون باشه که توی css3 ساپورت میشه)

mehbod.rayaneh

پنج شنبه 28 آذر 1392, 14:12 عصر

درود

.contain{
background:black;
padding:80px;
width: 900px;
overflow:hidden
}

تغییر بدید!
موفق باشید

woeful

پنج شنبه 28 آذر 1392, 14:56 عصر

روش اول:
css

.contain:after{
clear:both;
content: "";
display: block;
} }

روش دوم با css و html:

<body>
<div class="contain">
<div class="right">
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
<div class="a">
<div>بالای نمایشی (1280 * 960) و اطلاعات بیشتر و همچنین طرح سئوالات و مشکلات خود در رابطه با نرم افزار به سایت. www.iran3dcenter.ir مراجعه نمایید این فیلم محتوی مطالب آموزشی زیر می باشد: -0012 important tip Introduction Getting Started with 3ds Max viewport setting viewport navigator آموزش نکات ضروری بسیارمهم مطالب کلیدی مبانی اولیه اصطلاحات کاربردی و تشریح عمومی شیوه نمایش اشیا در نما ها مختلف و نحوه حرکت دادن و مدیریت نما ها</div>
</div><hr/>
</div>
<div style="clear: both"></div> 
</div>
</body>

در واقع هر دو روش یکی هستن.. ( یه المنت باید اضافه بشه که استایل clear:both رو داشته باشه)
اما روش اول ساده تر و تر تمییزتره (البته حواستون باشه که توی css3 ساپورت میشه)

ممنون مشکلم حل شد.