html - inherit the height of block from another in css -
i have 2 areas, left menu pane , right content pane. css code both left , right below
/*-----------------navi_left area-----------------------*/ layoutform { clear: both; //background-color: #e2e2e2; font-size: 1em; height: 100%; } .div_navi { border:1px solid #cccccc; width:216px; height: inherit; float: left; } /*------------------contents area--------------------*/ .div_text{ border:1px solid #cccccc; vertical-align:top; width:761px; height: 100%; //padding:0px 0px 0px 34px; font-size:11px; line-height:22px; float: right; } the problem that, on pages right pane has more height due more content. want make such if right page gets more height, left should inherit height it. below picture shows both unequal. developing application in asp.net mvc4 , _layout.cshtml is
<!doctype html> <html lang="de"> <head> <meta charset="utf-8" /> <title>@viewbag.title - fleets go green dataserver</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @styles.render("~/content/css") @scripts.render("~/bundles/modernizr") <link href="@url.content("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css")" rel="stylesheet" type="text/css" /> <script src="@url.content("~/scripts/jquery-1.6.2.min.js")" type="text/javascript"></script> <script src="@url.content("~/scripts/jquery-ui-1.8.15.min.js")" type="text/javascript"></script> </head> <!-- new script added --> <script type="text/javascript" src="@url.content("~/scripts/myfile.js")" ></script> <body> <div class="content-wrapper"> <header> <div class="content-wrapper"> <div class="div_line"> <div class="div_grey"></div> <div class="div_blue"></div> </div> <div class="empty"></div> <div class="div_logo"> <div class="div_left_logo"> <img src="~/images/fgg_logo.gif" > </div> <div class="div_right_logo"> <img src="~/images/fgg_head.gif" > </div> </div> <div class="empty"></div> <div class="div_line"> <div class="div_grey"></div> <div class="div_blue"> <section id="login"> @html.partial("_loginpartial") </section> </div> </div> <div class="empty"></div> <!-- <div class="float-left"> <p class="site-title">@html.actionlink("fleets go green measurement", "index", "home")</p> </div> <div class="float-right"> <section id="login"> @html.partial("_loginpartial") </section> <nav> <ul id="menu"> <li>@html.actionlink("home", "index", "home")</li> <li>@html.actionlink("fahrzeuge", "index", "fahrzeuge")</li> <li>@html.actionlink("impressum", "about", "home")</li> <li>@html.actionlink("kontakt", "contact", "home")</li> </ul> </nav> </div>--> </div> </header> <!-- body layot--> <layoutform> <div class="div_content"> <div class="div_navi"> <div class="navi_empty"> </div> <ul id="menu"> <li>@html.actionlink("home", "index", "home")</li> <li>@html.actionlink("fahrzeuge", "index", "fahrzeuge")</li> @if (user.identity.isauthenticated) { <ul id="submenu"> <li>@html.actionlink("smart fortwo ed", "smartfrorted", "fahrzeuge")</li> <li>@html.actionlink("citroën c-zero", "citroenczero", "fahrzeuge")</li> <li>@html.actionlink("miamore", "miamore", "fahrzeuge")</li> <li>@html.actionlink("vw golf blue e-motion", "vwgolfblueemoon", "fahrzeuge")</li> <li>@html.actionlink("vw e-up!", "vweup", "fahrzeuge")</li> <li>@html.actionlink("vw elektro-caddy", "vwelectrocaddy", "fahrzeuge")</li> </ul> } <li>@html.actionlink("impressum", "about", "home")</li> <li>@html.actionlink("kontakt", "contact", "home")</li> @if (user.identity.isauthenticated) { <li>@html.actionlink("passwort ändern", "changepassword", "sgaccount")</li> } @if (user.isinrole("administrator")) { <li>@html.actionlink("security guard", "index", "dashboard", new { area = "securityguard" }, null)</li> } </ul> <div class="div_bottom_logo"> <img src="~/images/995_bmu_logo_vmxk9d.png" > </div> </div> <div class="div_text"> @rendersection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @renderbody() </section> </div> </div> <div class="empty"></div> </layoutform> <footer> <div class="content-wrapper"> <div class="div_line"> <div class="div_grey"></div> <div class="div_blue">© @datetime.now.year - niedersächsisches forschungszentrum fahrzeugtechnik (nff) | ifam bremen | </div> </div> <div class="empty"></div> <!-- <div class="content-wrapper"> <div class="float-left"> <p>© @datetime.now.year - imc meßsysteme gmbh berlin +49 (0)30 467090-0 - frankfurt +49 (0)6172 59672-0 - schweiz +41 (0)52 7221455 - Österreich +49 (0)6172-59672-0</p> </div>--> </div> </footer> @scripts.render("~/bundles/jquery") @scripts.render("~/bundles/jqueryui") @styles.render("~/content/themes/base/css") @rendersection("scripts", required: false) </div> </body> myfile.js looks
var heightright = $('.rightcontent').height(); $('.leftcontent').css('height', heightright); alert('js working'); 
i'll throw out idea using js - fiddle.
looking around bit, apparently it's difficult want css without fancy , less optimal code (absolute positioning, etc)
references:
floated div 100% height of parent inline-block div
floated div 100% height of dynamic parent without absolute position?
how make floated div 100% height of parent?
http://css-tricks.com/forums/topic/div-child-needs-to-have-height-of-100-of-div-parent/
js
var heightright = $('.rightcontent').height(); $('.leftcontent').css('height', heightright); you call js on pageload or on .change of height of right div.
best of luck.
Comments
Post a Comment