Geek Answers Handbook

Positioning relative div in another relative div with dynamic height

I have a simple problem that made me spend two days without any success. I'm new to CSS, so excuse me if I ask stupid questions.

Jsfiddle

Problem

I have a webpage with three headings for the main divs', 'contentContainer' and 'footer'. There is one div in the contentContainer called "content". The content of the div should contain several sections (I use purecss to represent each section in the grid)

A section must contain two divs divA and divB. Now "divA" should have a dynamic height, and divB should have a fixed height. Meaning, if I resize the browser, 'divA' should be resized along with the c section. The screenshot below visually shows what I described.

Webpage example

Now I do not understand the following:

  • Why is 'divB' not at the bottom of the 'section' section, although the bottom is 0?

  • Why can't I position 'divA' with top / bottom? This did not work, so I had to position it using the height property.

    .divA{
    position: relative;
    top: 0;
    bottom: 100px;
    ............
}

    instead

    .divA{
    position: relative;
    height: 85%;
    ...........
}
    1. Why does divB go beyond the section section? That doesn't make sense to me! 'divA' should be relative to the section, so why doesn't it respect the bounds of the parent div? The following screenshot shows what I mean.

Overlapping parent div

  • _1 - , div: 'divA' 'divB'. 'divA'

  • _2 'divA' 'divB'. . , "section" "content", .

, , - . , CSS , , ^^ ( - )

UPDATE

@Florian . .

overflow:hidden;

contentContainer, , "divB" div . , , , "divB" "100 " . "divA" . http://jsfiddle.net/oqe3bjxe/

Section is overlapping 'divB'

?

,

  • Ok.
  • , , "3"
  • , . .
  • ? ?
  • ?

. .

, , , . -, , , JSFiddle , ?

, Advance, Tefa

+4
5

. , , , , . div . . . , , divs html . , , , . , : JSFiddle

, , ( 100% , ). , :).

HTML

<div id="header"></div>
<div id="content">
    <div id="dummytext"></div>  
</div>
<div id="divA"></div>
<div id="divB"></div>
<div id="footer"></div>

CSS

#header{/*changed closing tags in html to: <div id="header"></div>*/
    position: fixed;
    top: 0px;
    height: 50px;
    left: 0px;
    right: 0px;
    background-color: blue;
    border-bottom: white solid 20px;
}
#divA{ 
    position: fixed;   
    bottom: 170px; /*no height but top/bottom values so containers height changes based on browsersize*/
    top: 70px;
    left: 0px;
    right: 50%;
    background-color: yellow;
}
#divB{
    position: fixed;   
    bottom: 70px;
    height: 100px;
    left: 0px;
    right: 50%;
    background-color: red;

}
#footer{
    position: fixed;
    bottom: 0px;
    height: 50px;
    left: 0px;
    right: 0px;
    background-color: blue; 
    border-top: white solid 20px;
}
#content{
    margin: 70px 2% 70px 55%; /*margins to place scrollable content avoiding fixed content to appear on top of the content*/ 
}
#dummytext{/*Just some dummy text to see what happens with scrollbar*/
    height: 1000px;
    width: 100%; 
    background: linear-gradient(red, orange, yellow, green, blue);/*all colors of the rainbow, just because..*/
}
+2

, contentContainer.

, CSS:

.contentContainer{
    overflow:hidden;
}

.

1. : 0 auto, , .

2. : relative , , .

3. , (, 1500 ), % . % , , .

4. : relative. , , margin-top .

5. , , padding-bottom.

+3

.
position: relative; .section, position: absolute; , .

MDN:

:
, , (, , , ). : on table - * - group, table-row, table-column, table-cell - undefined.

:
. . , .

fiddle.

.section {
    background-color: red;
    position: relative;
    bottom: 0;
    top: 0;
    height: 100%;
    /*put this uncommented if youll want the black box to minimize with the whole thing
    overflow: hidden*/
}

.divA {
    background-color: green;
    height: 85%;
    width: 100%;
    /*width: calc(100% - 14px); optional, works in some browsers, use with margin*/
    position: absolute;
    top: 0px;
    /*you can remove this if you don't want red visible
    margin: 0 7px;*/
}

.divB {
    background-color: black;
    position: absolute;
    bottom: 0px;
    height: 100px;

    width: 100%;
    /*width: calc(100% - 14px); optional, works in some browsers, use with margin*/
    background-color: black;
    /*you can remove this if you don't want red visible
    margin: 0 7px;*/
}

: uncommenting

  • overflow: hidden; , . 100px;
  • width: calc(...); margin: 7px 0px; , .

. , .

EDIT: , height: 85%; , , @RMo, , .section 666px.
height: 85%; bottom: 100px , calc(): height: calc(100% - 100px);.

calc(). , , .

, @TeFa, css.:)

+3

, divB . css.

.divA {
    background-color: green;
    max-width: 1000px;
    max-height: 1080px;
    height: 100%;
    position: relative;
    top: 0;
    margin: 0 7px 0 7px;
}

css

.divA{
    margin-bottom: -100px;
}

.divB,
.divA:after {
    height: 100px;
}
+3

there are many answers. My answer is not a true answer, but a hint that helps me a lot when I started. Have you tried something like reset.css? Each broswer has different default values ​​and sets all css properties to zero, so after that you can finally write your own css.

You just include it in front of your css file.

It seems that

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

The original website is here .

Hope to help you a bit. ^^

+2
source

More articles:


All Articles