bola balandligi div ota-bobning oxiriga qadar kengayadi

Quyidagi html bor:

<div class="div1">
    <div class="div1a"></div>
    <div class="div1b"></div>
    <div class="div1c"></div>
</div>

Here a link of layout: http://jsfiddle.net/7ZGaG/5/

Men balandlikni faqat div1ga berishim kerak.

  • div1a va div1b qattiq balandligi bor. (Aslida div1 da sobit bo'lgan balandlikda)
  • div1c div1 ning tagiga kengaytirish kerak.

Misol uchun:

div1:   400px
div1a: 100px
div1b: 100px
div1c:  50px

Shuning uchun quyida 150px bo'sh joy mavjud. (400 - 100 - 100 - 50 = 150). Qanday qilib div1c ning div1 tagidagi balandlikka ega bo'lgan CSS bilan buni hal qilishim mumkin?

Div1c uchun height: 100% qilsam, u div1ning balandligini oladi va u 400px.

Rahmat!

1
@Ozkan: Men barchasi CSS purism uchun bo'laman, lekin div1ning balandligini belgilash uchun JavaScript dan foydalansangiz, siz JavaScript-ni ham div1c balandligini o'rnatish uchun ham ishlatishingiz mumkin.
qo'shib qo'ydi muallif Dan Dascalescu, manba
Balandligini sinash uchun nima qilish kerak: auto; div1c uchun
qo'shib qo'ydi muallif Rohan, manba
Va siz biron-bir sababga ko'ra div1cning balandligini 200px ga sozlay olmaysizmi? Div1ning balandligi o'zgaradimi?
qo'shib qo'ydi muallif dunnza, manba
@Ozkan, yomonlik! Ushbu balandliklar JavaScript bilan dinamik ravishda o'rnatiladimi?
qo'shib qo'ydi muallif dunnza, manba
Ha, albatta. Javascript orqali ota-bobga balandlikni berish kerak
qo'shib qo'ydi muallif Ozkan, manba
@Zach Menimcha, siz meni yaxshi tushunmadingiz. Men buni o'rnatolmayman. Div1 dinamik bo'lishi kerak (400px sobit emas). Bu boshqacha bo'lishi mumkin. div1c har doim ota-bobning pastki qismida kengaytirilishi kerak (shuning uchun div1c ham sobit qiymat bo'la olmaydi)
qo'shib qo'ydi muallif Ozkan, manba
@Rohan So'ngra, uning balandligi (50px)
qo'shib qo'ydi muallif Ozkan, manba

4 javoblar

.div1 { height: 400px; }
.div1a { 
    float: left;
    width: 100%;
    height: 100px;
    clear: both; }
.div1b { 
    float: left;
    width: 100%;
    height: 100px;    
    clear: both; }
.div1c { height: 100%; }

See working example: http://jsfiddle.net/Wexcode/ENaqK/

3
qo'shib qo'ydi
Men siz aytayotganingizni ko'rib turibman. Hacky'dan ko'ra aqlli, deb aytaman;)
qo'shib qo'ydi muallif Wex, manba
Hmm, qanday qilib bu hacky? U faqat suzuvchi xususiyatni ishlatadi.
qo'shib qo'ydi muallif Wex, manba
Bu shukr, lekin hali ham ozgina hacky. Lekin OK: D.
qo'shib qo'ydi muallif Ozkan, manba
float left (chap qavat), div, yuqorida ko'rsatilgan div tashqari bo'lishi kerak degan ma'noni anglatadi. Lekin bu erda biz barcha divslarni vertikal holda egallaymiz
qo'shib qo'ydi muallif Ozkan, manba

Buni amalga oshiradigan ba'zi CSS-lar.

.div1 is overflow: hidden set to grab the height of the tallest div. Which it sounds like it could be .div1a or .div1b. .div1c is position: absolute so that it can use .div1 is a guide, it positions itself off of the bottom and is put into position with top and right.

.div1 {
    width: 450px;
    position: relative;
    background: wheat;
    overflow: hidden;
}
.div1a {
    float: left;
    width: 150px;
    background: blue;
}
.div1b {
    float: left;
    width: 150px;
    height: 120px;
    background: red;
}
.div1c {
    width: 150px;    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 150px;
    background: pink;
}

and a fiddle: http://jsfiddle.net/neilheinrich/7ZGaG/

0
qo'shib qo'ydi
sharhlaringiz asosida biroz farq qilish uchun yangilangan.
qo'shib qo'ydi muallif nheinrich, manba
ahmoq, ustunlar uchun ketayotganingni o'yladim.
qo'shib qo'ydi muallif nheinrich, manba
Buni amalga oshirishingiz mumkin: jsfiddle.net/neilheinrich/7ZGaG/6 . Lekin haqiqatan ham bu juda xakik.
qo'shib qo'ydi muallif nheinrich, manba
Yo'q, men qattiq balandlikni div1cga berolmayman. Div1 (ota-ona) ning qattiq balandligi bo'lmasligi kerak
qo'shib qo'ydi muallif Ozkan, manba
Xristian @ nheinrich. O'zingizning tartibingiz boshqacha. jsfiddle.net/7ZGaG/5 Bu erda siz va mening muammomni ham ko'rishingiz mumkin. Shunday qilib, pushti div diviziyani kengaytirishi kerak, ammo qanday qilib?
qo'shib qo'ydi muallif Ozkan, manba

Mana nima qilgan bo'lsam ( mening jsfiddle ):

.div1 {
    position: relative;
    height: 400px;
    border: 1px solid black;
    overflow: hidden;
}

.div1a {
    height: 100px;
    background-color: yellow;
}

.div1b {
    height: 100px;
    background-color: blue;
}

.div1c {
    position: relative;
    top: 200;
    height: 100%;
    background-color: red;
}

Biroq, agar JavaScript-ga kirishim bo'lsa, uni biroz boshqacha qilardim.

0
qo'shib qo'ydi
Asosiy yozuvimni menda ko'rib turgan shablonga qarang. joylashuvi suzmasdan vertikaldir
qo'shib qo'ydi muallif Ozkan, manba

Easy solution would be to style the parent div with overflow:hidden and the child div with height:100%

Quyidagi atributlarni qo'shing:


For div1

holati: qattiq


For div1c

overflow:hidden; position:relative; height:100%;


Sample code - http://jsfiddle.net/7ZGaG/26/

0
qo'shib qo'ydi
Savolga tegishli namunadagi kod foydali bo'lishi mumkin (bu qiziqarli javob, shu bilan birga).
qo'shib qo'ydi muallif cale_b, manba
Mening postimni yangiladim. Namuna kodli qo'shilgan. Cheers!
qo'shib qo'ydi muallif Swanidhi, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb