Бала биіктігі div div par divine төмендейді

Менде келесі html:

<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/

Биіктікті тек div1-ге беруім керек.

  • div1a және div1b биіктігі тіркелген. (Іс жүзінде div1 тіркелген биіктікке ие)
  • div1c div1 түбі бойынша кеңейту керек.

Мысалға:

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

Сонымен, төменгі жағында 150px бос орын бар. (400 - 100 - 100 - 50 = 150). Мұны div1c div1 түбі бойынша биіктікке ие CSS арқылы қалай шешуге болады?

Егер div1c үшін height: 100% жасасам, онда div1 биіктігі, яғни 400 пиксель.

Рахмет!

1
@Ozkan: Мен бәрібір CSS пуризму үшінмін, бірақ егер сіз JavaScript-ді div1-дің биіктігін орнату үшін қолдансаңыз, JavaScript-ді div1c биіктігін орнатуға болады.
қосылды автор Dan Dascalescu, көзі
Биіктікті көрсеңіз не болады: auto; div1c үшін
қосылды автор Rohan, көзі
Және қандай да бір себептермен div1c биіктігін 200px мәніне орнатуға болмайды? Div1-дің биіктігі өзгере ме?
қосылды автор dunnza, көзі
@ Озкан, менің жаман! Бұл биіктіктер JavaScript арқылы динамикалық орнатылған ба?
қосылды автор dunnza, көзі
Иә, шынымен. Javascript арқылы ата-ана мен бойға биікті берілуім керек
қосылды автор Ozkan, көзі
@Zach Менің ойымша, сіз мені жақсы түсінбейсіз. Мен оны белгілей алмаймын. Div1 динамикалық болуы керек (400px бекітілмеген). Бұл әртүрлі болуы мүмкін. div1c әрдайым ата-ана дивизионының түбіне дейін кеңейтілуге ​​тиіс (сондықтан div1c де тіркелген мән болмайды)
қосылды автор Ozkan, көзі
@Rohan Содан кейін, өзі биіктігі (50px)
қосылды автор Ozkan, көзі

4 жауаптар

.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
қосылды
Мен сенің айтқаныңды көремін. Мен айтарым, бұл әлдеқайда ақылды.
қосылды автор Wex, көзі
Хмм, бұл қалай дәл осылай? Ол жай ғана құбылмалы заттардың қасиетін қолданады.
қосылды автор Wex, көзі
Бұл рахмет, бірақ әлі де кішкентай хакy. Бірақ жақсы: D
қосылды автор Ozkan, көзі
float left дегеніміз, div div div жоғары болуы тиіс. Бірақ, бізде барлық divs тігінен бар
қосылды автор Ozkan, көзі

Міне, мұны жасайтын кейбір CSS.

.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
қосылды
түсініктемелеріңізге негізделген жұмысыңыз сәл өзгеше болуы үшін жаңартылды.
қосылды автор nheinrich, көзі
Мен, бағандарға барар деп ойладым.
қосылды автор nheinrich, көзі
Сіз мұны істей аласыз: jsfiddle.net/neilheinrich/7ZGaG/6 . Бірақ адал, бұл өте әбден.
қосылды автор nheinrich, көзі
Жоқ, мен div1c-ге тіркелген биіктігі бере алмаймын. Себебі div1 (ата-ана) тіркелген биіктікке ие болмауы керек
қосылды автор Ozkan, көзі
Hi @ nheinrich. Сіздің орналасуыңыз басқаша. jsfiddle.net/7ZGaG/5 Мұнда Сіз оны көре аласыз, сондай-ақ менің проблема. Сонымен, қызғылт div Divite div дейін кеңейтілуі тиіс, бірақ қалай?
қосылды автор Ozkan, көзі

Міне, мен ( менің 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;
}

Алайда JavaScript-ға қол жеткізген болсам, оны басқаша орындап едім.

0
қосылды
Менің басты хабарламаны менің үлгім үшін қараңыз. макет өзгермейтін тік болып табылады
қосылды автор Ozkan, көзі

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

Келесі төлсипаттарды қосыңыз:


For div1

күйі: тіркелген


For div1c

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


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

0
қосылды
Сұраққа қатысты үлгі кодын пайдалы (қызықты жауап, айтпақшы).
қосылды автор cale_b, көзі
Менің лауазымымды ғана жаңартты. Қосылған үлгі коды. Көңілділер!
қосылды автор Swanidhi, көзі