ダイナミックボーダーディビジョンがまったく表示されない

Question

divをボーダーとして使用するのが難しいです。私はメインとサイドバーのdivを両側に持っており、border divの高さをメインdivの高さまたはサイドバーdivの高さに応じて設定します。

私はここで類似の高さの問題を見てみましたが、動作させることはできません。 This is the JsFiddle。

HTML

<div class="container"> 
     <div class="sidebar height"> 
      <div class="sidebar-inner"> 
       <img class="logo-sidebar" src="img/logo.jpg" /> 
       <img class="img-sidebar" src="img/pic1.jpg" /> 
      </div> 
     </div> 
     <div class="border"></div> 
     <div class="main border-inner height"> 
      <div class="main-inner"> 
       <img class="img" src="img/pic7.jpg" style="height: 300px;" /> 

      </div> 
     </div> 

CSS

.container { 
max-width: 926px; 
margin: 0 auto; 
background-color: #66AB98; 
color: #fff; 
overflow: hidden; 
} 

.sidebar { 
    float: left; 
    width: 26.1%; 
    padding-bottom: 2000px; 
    margin-bottom: -2000px; 
    display: block; 
} 

.sidebar-inner { 
    width: 96%; 
    margin: 30px 2%; 
} 

.main { 
    float: right; 
    width: 73%; 
    padding-bottom: 2000px; 
    margin-bottom: -2000px; 
    display: block; 
} 

.main-inner { 
    width: 96%; 
    margin: 30px 2%; 
} 

.border { 
    float: left; 
    width: .5%; 
    background-color: #000; 
    margin: 30px 0; 
} 

p { 
    text-indent: 30px; 
    font-size: 20px; 
    padding: 10px 0 10px 20px; 
} 

.img { 
    width: 500px; 
    display: block; 
    margin: 10px auto 0 auto; 
} 


/*--------------------- 
     Sidebar 
---------------------*/ 

.logo-sidebar { 
    width: 90%; 
    margin: 0 5%; 
    height: 500px; 
    display: block; 
} 

.img-sidebar { 
    width: 90%; 
    margin: 20px 5% 0 5%; 
    display: block; 
} 

jQueryの

$(document).ready(function() { 
    var height - main = $(".main").height(); 
    var height - sidebar = $(".sidebar").height(); 

    if (height - main > height - sidebar) { 
    $(".border").css("height", height - main); 
    } else if (height - main < height - sidebar) { 
    $(".border").css("height", height - sidebar); 
    } 
}); 

Answer 1

あなたの変数名前は無効です。 JSでは、変数名には減算演算子のように-を含めることはできません。それを削除し、あなたのコードは動作します、例えば：

var mainHeight = $(".main").height(); 
var sidebarHeight = $(".sidebar").height(); 

if (mainHeight > sidebarHeight) { 
    $(".border").css("height", mainHeight); 
} else if (mainHeight < sidebarHeight) { 
    $(".border").css("height", sidebarHeight); 
} 

はまた、あなたはこのように、if文を削除し、Math.max()を使用してコードを簡単にすることができますのでご注意：

var mainHeight = $(".main").height(); 
var sidebarHeight = $(".sidebar").height(); 
$(".border").css("height", Math.max(mainHeight, sidebarHeight)); 

Working example

Answer 2

にあなたはなぜただのCSSでそれをやり遂げることができるのか、私はなぜこのような単純なタスクのためにJavaScriptを使用しているのか理解できません。

.container { 
 
    max-width: 926px; 
 
    margin: 0 auto; 
 
    background-color: #66AB98; 
 
    position: relative; 
 
    color: #fff; 
 
    overflow: hidden; 
 
} 
 

 
.container:before { 
 
    position: absolute; 
 
    background: #000; 
 
    left: 26.25%; 
 
    content: ''; 
 
    width: 3px; 
 
    bottom: 28px; 
 
    top: 28px; 
 
} 
 

 
.sidebar { 
 
    float: left; 
 
    width: 26.1%; 
 
    padding-bottom: 2000px; 
 
    margin-bottom: -2000px; 
 
    display: block; 
 
} 
 

 
.sidebar-inner { 
 
    width: 96%; 
 
    margin: 30px 2%; 
 
} 
 

 
.main { 
 
    float: right; 
 
    width: 73%; 
 
} 
 

 
.main-inner { 
 
    width: 96%; 
 
    margin: 30px 2%; 
 
} 
 

 
.border { 
 
    float: left; 
 
    width: .5%; 
 
    background-color: #000; 
 
    margin: 30px 0; 
 
} 
 

 
p { 
 
    text-indent: 30px; 
 
    font-size: 20px; 
 
    padding: 10px 0 10px 20px; 
 
} 
 

 
.img { 
 
    width: 500px; 
 
    display: block; 
 
    margin: 10px auto 0 auto; 
 
} 
 

 

 
/*--------------------- 
 
Sidebar 
 
---------------------*/ 
 

 
.logo-sidebar { 
 
    width: 90%; 
 
    margin: 0 5%; 
 
    height: 500px; 
 
    display: block; 
 
} 
 

 
.img-sidebar { 
 
    width: 90%; 
 
    margin: 20px 5% 0 5%; 
 
    display: block; 
 
}

<div class="container"> 
 
    <div class="sidebar height"> 
 
    <div class="sidebar-inner"> 
 
     <img class="logo-sidebar" src="img/logo.jpg" /> 
 
     <img class="img-sidebar" src="img/pic1.jpg" /> 
 
    </div> 
 
    </div> 
 
    <div class="border"></div> 
 
    <div class="main border-inner height"> 
 
    <div class="main-inner"> 
 
     <img class="img" src="img/pic7.jpg" style="height: 300px;" /> 
 

 
    </div> 
 
    </div> 
 
</div>