在css中继承了另一个块的高度

时间：2014-04-14 12:23:24

标签： html css

我有两个区域，左侧菜单窗格和右侧内容窗格。左侧和右侧的CSS代码如下所示

/*-----------------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;
}

问题是，在某些页面上，由于内容更多，右侧窗格的高度更高。我想这样做，如果正确的页面获得更多的高度，左边应该从它继承高度。下图显示两者都不平等。我正在asp.net MVC4开发应用程序，而_layout.cshtml是

<!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看起来像这样

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

enter image description here

2 个答案:

答案 0 :(得分：0)

试试这个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>

答案 1 :(得分：0)

我会抛出一个使用JS的想法 - FIDDLE。

环顾四周，显然很难用CSS做你想做的事而没有一些花哨而且不是最优的代码（绝对定位等）

参考文献：

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);

您可以在页面加载上调用js，或者在右侧div的高度上调用.change。

祝你好运。

相关问题
最新问题