브라우저 크기에 비례하여 div 크기를 조정하는 방법은 무엇입니까?

JQuery와브라우저 크기에 비례하여 div 크기를 조정하는 방법은 무엇입니까?

$(window).ready(function(){ 

    var w = $(window).width();//to detect the width of the browser 
    var h = $(window).height();//to detect the height of the browser 

    $(window).resize(function(){ 

     var w = $(window).width();//new width of the browser 
     var h = $(window).height();//new height of the browser 

     $("#left").css('height'+ h 'px.');//this is where I'm not sure how to assign height  value according to the browser size. 

    }); 

    });

내 CSS를

#main 
{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
    background: #000000; 
} 
#left 
{ 
    width: 20%; 
    height: 650px; 
    position: relative; 
    float: left; 
    background: #666666; 

} 
#right 
{ 
    width:80%; 
    height: 650px; 
    position: relative; 
    float:right; 
    background: #ff9900; 
}

내 html로

<div id="main"> 
     <div id="left"> 
     </div> 

     <div id="right"> 
     </div> 

    </div>

이제 문제는 왼쪽과 오른쪽 DIV의 높이입니다. 높이를 설정하면 100 %; 그것은 내가 원하지 않는 콘텐츠 높이를 따른다. 높이를 브라우저 높이에 맞게 늘려야합니다. 그래서 높이를 사용하면 650px; 그것은 작동하지만 페이지가 더 크거나 더 큰 크기로 조정되면 어떻게됩니까? 스크롤 막대가 표시되지 않도록 브라우저의 페이지 크기를 확인하고 비례하여 높이를 변경하는 방법은 무엇입니까?

출처

2013-11-22 Kalaivani Nair

이것은 div의 기본 메커니즘이었습니다. 여기에 아무 것도 쓸 필요가 없습니다. –

여기에서 javascript를 사용하는 것이 더 좋습니다 ....... screen.height 및 screen.width 사용 –

div를 브라우저 창 전체 길이로 만들려는 것 같습니다. 그렇다면 다른 div가있는 경우 div {height: 100%; padding: 0; margin: 0; }과 같은 것을 사용하면 효과가 없습니다.

이 시도 : 심지어 방법으로 사이트의 나머지와 사업부 전체 브라우저의 높이를 만들 것입니다

div { 

position:fixed; 
top:0; 
left:0; 
right:0; 
bottom: 0; 

}

. 바이올린의

예 : CSS 문서에서 또는 스타일 태그 내에서

http://jsfiddle.net/5MUTy/1/

출처

2013-11-22 04:46:21 agconti

위치가 절대적이어야합니까? –

바이올린에서 절대 값을 변경해보십시오. 그렇게하면 높이가 전체 화면을 차지하지 않습니다. – agconti

내가 아는 것이 이상하게 보입니다. 나는 지난 주에 이것을하고 있었고 절대 myslef를 사용하여이 문제에 부딪혔다. 그리고 질문을해야했다 : http://stackoverflow.com/questions/20021706/popup-div-to-fill-entire-browser-width-and- 높이. 대답은 고정으로 설정하는 것이 었습니다. – agconti

이것은 div의 기본 메커니즘이었습니다. 에 대해 쓸 필요가 없습니다. <body>과 <div> 모두 여백과 패딩을 0으로 설정하십시오.

아니면 이 그럼 당신은

$(window).innerWidth() 및 $(window).innerHeight() // 위 코드를 사용하여 그것을 더 잘 할 수 ... JQuery와 또는 자바 스크립트에 관심이 있다면 브라우저의 뷰포트 영역을 반환

방법에 - 사용 예 :

$(window).width() 및 $(window).height(). //이 코드는 전체 브라우저 너비와 높이를 반환합니다.

출처

2013-11-22 04:41:10

감사합니다. @Lakshmi! 브라우저 높이에 따라 div 높이를 맞추려면 아무 것도 할 수 있습니까? 내 모든 jquery 작동하지 않습니다 .so는 % 대신 px로 높이를 고정시킵니다. 그러나 페이지가 큰 화면에서 보았을 때 걱정됩니다. 몸 색깔이 빈 공간에 바로 표시됩니까? –

, 아래

html,body{ 
width:100%; 
height:100%; 
} 
div{ 
width:100%; 
height:100%; 
}

출처

2013-11-22 04:46:24 user2756339

는 jQuery를 통해 사업부에 CSS를 추가하는 올바른 구문입니다. 절대 :

$("#left").css('height', h +'px'); // where h is height variable.

출처

2013-11-22 05:03:12

고마워요. 브라우저 크기를 감지하고 브라우저에 표시하는 방법을 알려주시겠습니까? –

코드에서 그렇게했습니다. 아래는 브라우저의 너비와 높이로 얻을 수있는 크기입니다. varwidth = $ (window) .width(); // 브라우저의 새 너비 var h = $ (window) .height(); // 브라우저의 새 높이 참고 : innerwidth()는 창문을 가지고 일해라. jQuery 문서를 참조 할 수 있습니다. http://api.jquery.com/innerWidth/ –

ok라고 써 있습니다. –

는 글쎄, 난 단지가 위치보다 추가해야 페이지의 맨 아래에 DIV 맞는을 만들 것을 발견했다. 하지만 왼쪽과 오른쪽에 두 개의 DIV가 있기 때문에 왼쪽에 DIV와 postion : 고정, 오른쪽으로 DIV 고정 : 위치를 추가합니다. 이전에 DIV {position : fixed}를 추가 한 다음 Chrome과 Firefox에서만 작동했지만 IE10에서는 작동하지 않았습니다. 그래서 DIV 태그에 높이 100 %를 추가했습니다. 모든 브라우저에서 작동합니다.

의견을 공유해 주셔서 감사합니다. 지금까지 jquery를 사용하지 않았습니다.

출처

2013-11-24 08:39:16

여기이 기능이 나에게 도움이되는 것 같습니다. calc()는 브라우저에서 널리 지원되지 않지만 정적 높이는 %로 지정할 수 있습니다.

http://codepen.io/magnus16/pen/BlpeK

CSS를 리셋 사용하고 그에 따라 여백을 조정하고 갈 수 있어야한다.

출처

2013-12-06 02:54:42