如何动态设置div高度值？

Question

I have a HTML page and include 3 div like this: Link

<div style="min-height:100%;">
        <div id="TopContent" style="display: inline-block; height: 100px; width: 100%; background-color: #CCDEBB;">
        </div>

        <div id="LeftContent" style="display: inline-block; width: 25%; border: 3px solid #DFE8F6;">

                </div>             

        <div id="RightContent" style="border: 3px solid #b8cfee; display: inline-block; float: right; width: 72%;">


        </div>

            </div>

I want to set height value of LeftContent and RightContent according to page height value. I mean LeftContent and RightContent height extend end of the page.

Answer 1

Use calc();

#LeftContent{
float:left;
margin-right:3px;
height:calc(100% - 100px); //-100px because height of top bar is 100px

}

same for Right Content

Answer 2

You can't control height with this HTML, but you can emulate this effect with :before/:after elements:

#LeftContent:after,
#RightContent:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:9999px;
    z-index:-1;
    background:#DFE8F6;
}
#RightContent:after{background:#b8cfee;}

http://jsfiddle.net/EhnhZ/

Answer 3

I suggest you to use classes instead of id.

HTML

<div class="content top"></div>
<div class="content left"></div>
<div class="content right"></div>

CSS

*{
  height:100%;
  width:100%;
  margin:0;
} /* instead of HTML and BODY attributes */

.content{
  display:inline-block;
  margin-right:-4px; /*to margin left div with the right one!*/
  margin-top:-4px; /*to margin left and right divs with the top one!*/
}

.left{
  height:calc(100% - 200px); /*use calc(100% - "top div height" */
  width:50%; /*choose your own width*/
  background-color:red;
}

.right {
  height: calc(100% - 200px); /*use calc(100% - "top div height" */
  width:50%; /*choose your own width*/
  background-color:green;
}

.top{
  width:100%;
  height:200px;
  background-color:blue;
}

Hope this can help you! ( see more on http://codepen.io/utopy/pen/zcyti )

Answer 4

Like this demo ?

just add float: left; to LeftContent

Answer 5

I built my answer using the answer from this question

<style>
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>

<div style="min-height:100%;height:100%;">
    <div id="TopContent" style="height: 100px; width: 100%; background-color: #CCDEBB;">
    </div>

    <div id="LeftContent" style="min-height:100%;width: 25%; border: 3px solid #DFE8F6;float:left">    
    </div>             

    <div id="RightContent" style="min-height:100%;border: 3px solid #b8cfee; width:72%;float:right">
    </div>
</div>

Answer 6

At current your solution will not work, this is because of how web page documents render.

At the moment from your HTML your current document is the following height :

100px (from TopContent)

+ 3px (from LeftContent)

+ 3px (from RightContent)

Because the document does not need to be larger than 106px (based on the content) then the document element will not render as more than that.

What you can do to trick this is by setting the body/html CSS attributes to have a height of 100%.

Use the following CSS to do this :

body,html {
    height:100%;
}

Also you will need to set the height of your container div to be as

<div style="height:100%;">

Here is an example JSFiddle for your problem.

Answer 7

You should use jquery,in this event set the height of divs

$(window).resize(function () {
 $('#LeftContent').css('height',$(window).height());
 $('#RightContent').css('height',$(window).height());
        });