наследовать высоту блока от другого в CSS

0

У меня есть две области: левое меню и правая область содержимого. 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');

Изображение 174551

  • 0
    Опубликуйте также свой HTML. Скрипка была бы еще лучше
  • 0
    philipwalton.github.io/solved-by-flexbox/demos/grids
Показать ещё 1 комментарий
Теги:

2 ответа

0
Лучший ответ

Я выброшу идею с помощью JS- FIDDLE.

Немного оглядеться, по-видимому, очень сложно делать то, что вы хотите, с помощью CSS без какого-либо причудливого и менее оптимального кода (абсолютное позиционирование и т.д.),

Рекомендации:

Floated div 100% высота родительского встроенного блока div

Floated div 100% высота динамического родителя без абсолютного положения?

Как сделать плавающий div 100% высоты своего родителя?

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 на pageload или на.change высоты правого div.

Удачи.

  • 0
    Это тоже не сработало. Я добавил новый файл myFile.js в папку Scripts и вставил ваш код как есть. Тогда на моей странице, где я хочу сделать одинаковый размер, это называется <script type="text/javascript" src="myFile.js" ></script>
  • 0
    Поместите его над тегом body на той же странице между тегами <script> </ script>. Добавьте предупреждение линии («JS работает»); ниже строки .css, чтобы убедиться, что код читается.
Показать ещё 6 комментариев
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>
  • 0
    Это не имеет никакого значения.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню