how to make Two div in a line when down one height raise, up one auto smaller

Question

my code:

<div>
    <div class='a'> </div>
    <footer></footer> 
</div>

a:

position: absolute;
left: 0;
bottom: 0px;
height: 105px;
width: 100%;
margin: 0;
background: #f5f5f5;
border-top: solid 1px #afafb6;
z-index: 900;

footer:

position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #F0EEEE;
white-space: nowrap;

it's like this:

-----|---------|
|   ||         |
| a ||         |
-----|         |
|   ||         |
|foo||         |
|ter||         |
-----|---------|

when footer height bigger,how to make div a's height auto smaller.

I tought a way to set footer max-height to 60% ,and a to 40%,but if footer changes ,60% became a bit small

I reproduced your code into a fiddle, but it doesnt give me the same result as your 'drawing'. Anyway; why not give the wrapper a height of 100% and the footer for example 60%. the a will size to 40%. — Matheno, Sep 17 '14 at 08:01
well, about getting divs side-by-side please have a look at this link: [http://stackoverflow.com/questions/5387392/how-to-get-these-two-divs-side-by-side](http://stackoverflow.com/questions/5387392/how-to-get-these-two-divs-side-by-side) — Nadim, Sep 17 '14 at 08:05
@Justinas thanks,I write js to get the foorter's height and set the a div's bottom to the height — user2378534, Sep 28 '14 at 02:02

Danield · Answer 1 · 2014-09-17T09:42:20.000

You can use css tables to do this.

FIDDLE 1 and FIDDLE2

Also, you can add a max-height for the footer by wrapping the content in an additional element and setting max-height on that element.

FIDDLE 3 (Be sure to resize the browser window)

Demo

* {
    margin:0;
    padding:0;
}
html, body {
    height:100%;
    width:100%;
    background: yellow;
}
.wpr {
    display:table;
    width: 100%;
    height: 100%;
}
.a, footer {
    width: 100%;
    background: yellow;
    display:table-row;
}
.a {
    background: pink;
    height:100%;
}
p {
    max-height: 40vh;
}

<div class="wpr">
    <div class='a'>a</div>
    <footer>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </footer>
</div>

how to make Two div in a line when down one height raise, up one auto smaller

1 Answers1

Demo