Dynamic Border Div가 전혀 표시되지 않음

Question

div를 테두리로 사용하는 데 어려움이 있습니다. 나는 그것의 양쪽에 메인과 사이드 바 div를 가지고 있고 어느 쪽이 더 큰지에 따라 메인 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(); 
$(".border").css("height", Math.max(mainHeight, sidebarHeight)); 

Working example

Answer 2

을 :

또한

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()를 사용하여 코드를 간단하게 할 수 있습니다 왜 당신은 단지 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>