<div class="div1a"></div> <div class="div1b"></div> <div class="div1c"></div> </div> Here a link of layout:"> <div class="div1a"></div> <div class="div1b"></div> <div class="div1c"></div> </div> Here a link of layout:"> <div class="div1a"></div> <div class="div1b"></div> <div class="div1c"></div> </div> Here a link of layout:" />

вышыня дзіця дзяленне з пашырыць да ніжняй часткі бацькоўскага DIV

У мяне ёсць наступны 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/

Мне трэба, каб даць вышыню толькі див1.

  • div1a і div1b маюць фіксаваную вышыню. (На самай справе див1 таксама мае фіксаваную вышыню)
  • div1c неабходна пашырыць да дна див1.

Напрыклад:

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

Такім чынам, ёсць 150px пустое месца ў ніжняй часткі. (400 - 100 - 100 - 50 = 150). Як я магу вырашыць гэтую праблему з дапамогай CSS, што div1c мае вышыню да ніжняй часткі див1?

Калі я вышыня: 100% для div1c, то ён прымае вышыню див1, і гэта 400px.

Дзякуй!

1
@Ozkan: Я ўсё для CSS пуризма, але калі ўсталяваць вышыню див1 выкарыстоўваць JavaScript, то вы можаце выкарыстоўваць JavaScript, каб усталяваць вышыню div1c, а таксама.
дададзена аўтар Dan Dascalescu, крыніца
Што рабіць, калі вы паспрабуеце вышыню: аўто; для div1c
дададзена аўтар Rohan, крыніца
І вы не можаце ўсталяваць вышыню div1c на 200px па нейкай прычыне? Ці будзе змена вышыні Div1 калі-небудзь?
дададзена аўтар dunnza, крыніца
@Ozkan, мой дрэнны! Ці з'яўляюцца гэтыя вышыні ствараюцца дынамічна з дапамогай JavaScript?
дададзена аўтар dunnza, крыніца
Так, сапраўды. Мне трэба, каб даць вышыню бацькоўскага DIV з дапамогай JavaScript
дададзена аўтар Ozkan, крыніца
@Zach Я думаю, вы не зразумелі мяне вельмі добра. Я не магу ўсталяваць яго. Паколькі div1 павінен быць дынамічным (400px ня фіксуецца). Гэта можа быць розным. то div1c заўсёды варта пашырыць да ніжняй часткі бацькоўскага DIV (так 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
дададзена
Ах, я бачу, што вы кажаце. Я б сказаў, што гэта больш разумны, чым Hacky;)
дададзена аўтар Wex, крыніца
Хм, як менавіта гэта Hacky? Гэта проста выкарыстоўваючы ўласцівасць паплаўкоў.
дададзена аўтар Wex, крыніца
Гэта ён, дзякуй, але ўсё яшчэ трохі Hacky. Але добра: D
дададзена аўтар Ozkan, крыніца
Паплавок злева азначае DIV павінен быць у баку вышэй спраў. Але тут мы маем усе дзівы вертыкальна
дададзена аўтар 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 . Але, шчыра кажучы, гэта даволі Hacky.
дададзена аўтар nheinrich, крыніца
Не, не, я не магу даць фіксаваную вышыню div1c. Бо ня div1 (адзiн з бацькоў) не павінен мець фіксаваную вышыню ні
дададзена аўтар Ozkan, крыніца
Прывітанне @nheinrich. Кампаноўка ў вас ёсць розная. jsfiddle.net/7ZGaG/5 Тут вы можаце ўбачыць яго, а таксама мая праблема таксама. Такім чынам, ружовы DIV павінен пашырацца бацькоўскі 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, крыніца