All geek questions in one place

Css floating side by side height divs 100%

I do not know how to ask about this without a picture. I have two divs, side by side, inside another div with indentation and margins per se. This is what I want to achieve:

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   +-----------------------------------------------------------+   |        |
|                                                                   |        |
+-------------------------------------------------------------------+--------+

but here is what I get. I can float divs and compensate for fields, etc., but I can not get div C to extend to the entire height of A. Neither A nor B have a fixed height, so how do I get C to expand to the full height of A?

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   +--------+
|   |                                                           |            |
|   |                                                           |            |
|   |                                                           |            |
|   +-----------------------------------------------------------+            |
|                                                                            |
+----------------------------------------------------------------------------+

Height A extends to height B. This is a completely fluid layout, so the width is also not fixed. Basically, I need C to increase the whole height of A.

I tried playing with all the heights, but I can't get it to work, because the heights are not fixed :(

A - div , , . B , float: left; C - div, float: right;

EDIT: IE, CSS-

+3
6

, CSS. , , jQuery , jQuery . , , .

, , . , , .

0

C position: absolute; right: 0; ? : http://jsfiddle.net/JMC_Creative/2gr3T/1/

#a { overflow:auto;
position: relative;
}

#b {height: 200px;
    width: 200px;
    margin: 50px;
    float: left;
}

#c { height: 100%;
    position: absolute;
    right: 0;
    width: 40px;
}
+4

, CSS, , ...

A B C C , A , C

+1

, , .

, , overflow: auto . quirksmode.

http://www.quirksmode.org/css/clearing.html

+1

- overflow:hidden #A #C padding-bottom:999em; margin-bottom:-999em;

IE5!

+1

, , question javascript .

:

  • <body>,
  • position relative, absolute, <body> position.
/* 
Name: Absolute 100% Height
Author: DSKVR 2010 
Website: http://dskvry.com
*/

body *.full-height, 
body *.full-height-left, 
body *.full-height-left, 
body *.full-height-width {
    position:absolute;
    height:auto;
    margin:0;
}

body *.full-height {
 top:0;
 bottom:0;
}

body *.full-height-left {
    top:0;
    bottom:0;
    left:0;
}

body *.full-height-right {
    top:0;
    right:0;
    bottom:0;
}

body *.full-area {
    top:0;
    left:0;
    right:0;
    bottom:0;
}
0

Source: https://habr.com/ru/post/1783715/

More articles:


All Articles