inherit the height of block from another in css

Question

I have two areas, left menu pane and right content pane. CSS code for both left and right are as 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 is that, on some pages the right pane has more height due to more content. I want to make such that if the right page gets more height, left should inherit height from it. Below picture shows that both are unequal. I am developing application in asp.net MVC4 and _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 Get Your 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">&nbsp;</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">&copy; @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>&copy; @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 like this

var heightright = $('.rightcontent').height();
$('.leftcontent').css('height', heightright);
alert('JS working');

enter image description here

http://philipwalton.github.io/solved-by-flexbox/demos/grids/ — Quentin, Apr 14 '14 at 12:25

score 0 · Answer 1 · answered Apr 14 '14 at 12:43

Try this CSS:

<style type="text/css">
/*-----------------navi_left area-----------------------*/
layoutform {
clear: both;
//background-color: #e2e2e2;
font-size: 1em;
height: 100%;
background:#0066FF;
}
.div_navi {
border:1px solid #CCCCCC;
width:216px;
display:block; 
position:relative;
float: left;
height:100%;
}

/*------------------Contents area--------------------*/
.div_text{
border:1px solid #CCCCCC;
vertical-align:top;
width:761px;
//padding:0px 0px 0px 34px;
font-size:11px;
line-height:22px;
display:block; 
position:relative;
float: right;
height:100%;
}

</style>

It does not make any difference. – Wafeeq Apr 14 '14 at 12:53 — Wafeeq, Apr 14 '14 at 12:53

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

I'll throw out an idea using JS - FIDDLE.

Looking around a bit, apparently it's very difficult to do what you want with CSS without some fancy and less than 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 to make a floated div 100% height of its 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 could call the js on pageload or on .change of the height of the right div.

Best of luck.

edited May 23 '17 at 10:33

Community

1
1

answered Apr 14 '14 at 13:04

TimSPQR

2,964
3
20
29

It did not work too. I have added a new file `myFile.js`to `Scripts` folder and pasted your code as its is. Then in my page where I want to make equal size is called this `` – Wafeeq Apr 14 '14 at 13:18
Put it above the body tag on the same page between tags. Add a line alert('JS working'); below the .css line to make sure the code is being read. – TimSPQR Apr 14 '14 at 13:20
I have edited my `_layout.cshtml` file and `myFile.js` is added also. Please have a look. result is still the same. – Wafeeq Apr 14 '14 at 13:38
I guess script is not running as I do not see any alert. – Wafeeq Apr 14 '14 at 13:41
You need to change the '.rightcontent' and '.leftcontent' to the names of your two columns. I'm working on taking your entire page and putting it on the web...give me some time. – TimSPQR Apr 14 '14 at 13:46
Go to this page - http://www.thedentons.us/coding/testbarheight.html - and you'll see an "outline" of your code (I obviously don't have all the styling). I changed the links to jQuery and everything seems to work. The alert popup works, and the heights of the two columns work. – TimSPQR Apr 14 '14 at 14:04
how did you link to the JQuery? – Wafeeq Apr 14 '14 at 14:13

inherit the height of block from another in css

2 Answers2