화면을 1 행 2 열로 나눕니다. 두 개의 열이

Question

다음

내 문제에 바이올린 링크입니다 브라우저의 100 % 높이이어야한다 : 왼쪽에 나타나는 별도의 스크롤 막대가 얼마나 http://jsfiddle.net/YZrae/2/

통보 .. 나는이 별도의 스크롤 막대를 제거해야하지만, 내가 뭘 잘못하고 있는지 알아낼 수 없다 ...

스크롤 막대를 유지하면서 나타나는 나머지는 제거하려면 왼쪽 및 오른쪽 열이 필요하다.

여기에 내가 바이올린에 사용 된 코드는 다음과 같습니다

HTML :

<div class="top_wrap"></div> 
<div class="content_wrap"> 
    <div class="col_right_wrap"></div> 
    <div class="col_left_wrap"></div> 
    <div class="clear"></div> 
</div> 

CSS :

html,body { 
padding:0; 
margin:0; 
height:100%; 
min-height:100%; 
} 
.top_wrap{ 
background-color:red; 
height:50px; 
} 
.content_wrap{ 
background-color:blue; 
height:100%; 
position:relative; 
} 
.col_right_wrap{ 
float:right; 
height:100%; 
background-color:green; 
width:50%; 
overflow-y: scroll; 
} 
.col_left_wrap{ 
float:left; 
width:49%; 
height:100%; 
background-color:yellow; 
overflow-y: scroll; 
} 
div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; } 

어떤 제안이? 감사!

Answer 1

약간의 jQuery를 사용해도 괜찮다면이 기능을 사용하십시오.

여기는 jsFiddle입니다.

코드 jQuery 코드는 .content-wrap의 크기를 (윈도우 높이 - .top_wrap 높이)로 조정합니다. 다음은 jQuery 코드입니다.

<script> 
functionHeight = function() { 
    var varBrowserHeight = $(window).height(); 
    var varTopWrapHeight = $(".top_wrap").height(); 

    $(".content_wrap").css('height', (varBrowserHeight - varTopWrapHeight)); 
}; 

$(document).ready(function() { 
    functionHeight(); 
}); 

$(window).resize(function (event) { 
    functionHeight(); 
}); 
</script> 

Answer 2

이것은 열의 높이가 100 %이고 상단에 스크롤 할 수 있도록 50px 행을 추가하기 때문입니다. 상위 행에 5 %, 아래에 두 개의 열에 95 % 높이를 지정하여 여분의 스크롤을 제거 할 수 있습니다. 그렇지 않으면 overflow-y : hidden; 그러나 삽입하려는 경우에는 오버 플로우되는 내용을 숨길 수 있습니다.