액체 레이아웃에서 Less.js를 사용하여 div의 높이 계산

액체 레이아웃을 가지고 있고 CSS에 Less.js를 사용하여 학습하고 있습니다.액체 레이아웃에서 Less.js를 사용하여 div의 높이 계산

사용자보기 상자를 고려해야하는 div 'A'가 있고, 다른 div 'B'높이 (%)와 마지막으로 픽셀에있는 다른 div 'C'를 빼십시오.

@menubarsHeight: 7%; // declaring variable with div 'B' 's height. 
@ttlHeight: '$(window).height()';  // calculating height using jquery 
@midParentHeight: -20px + @didParentHeight - @menubarsHeight;  // calculating the height based on the above two variables, -20px is the height of div 'C'.

출처

2012-05-13 Kayote

분명 몇 가지가 여기에 있습니다 : 여기

내가 일 것이라고 생각하지만,하지 않는 것입니다. 즉, @didParentHeight이 무엇인지 알려주지 않고 @ttlHeight을 계산하지만 사용하지 마십시오. div B의 부모가 무엇인지 명시하지도 않습니다 (창?).

이러한 불확실성을 감안할 때, 나는 몇 가지 가정하고 대답을 시도 할 것입니다. 나는 확실히 아니에요 때문에 내가 0.07 대신 7%를 사용

@menubarsHeight: 0.07; /* define as decimal */ 
@midParentHeight: @ttlHeight - 20px - (@ttlHeight * @menubarsHeight);

: 세 DIV 년대 자신의 부모와 창을 가지고 있고, 자바 스크립트가 올바른 창 높이를주는 경우이 해답이 될 것 같은, 그것은 보인다 만약 LESS가 정확하게 백분율을 사용하여 곱셈을하면 (px과 % 단위를 섞을 것입니다).

@midParentHeight: 100px - 20px - (100px * 0.07);

이 될해야하는 : @ttlHeight이 100px했다 진수는 다음 가정에 그래서,이에 계산한다

@midParentHeight: 100px - 20px - 7px = 73px

을 나중에 실제로 사업부의 B를 정의 할 수 @menubarsHeight를 사용해야하는 경우, 수행이 (10 진수 가지고 CSS 대한 % 단위 값에 넣어되는) 다음으로 w

div.B { height: percentage(@menubarsHeight); }

출처

2012-05-13 18:49:42 ScottS

감사합니다. ScottS. 나는 변수를 가지고 노는 중이었고 오래된 ref를 잘못 삽입했다. 다른 변수로. 페이지를로드 할 때 'C가 작동하지 않습니다'라는 오류가 표시되는 것을 제외하고 귀하의 대답은 정확합니다. 나는 jquery와 관련 있다고 생각한다. 거기에 심판이 있습니까? 덜 jquery를 연결하는 방법? – Kayote

추신 : 내일 정답으로 확인하겠습니다. jquery 문제가 해결되어 내일까지 열어두기를 바라고 있습니다. 최고, – Kayote

@ Kayote - 아마도 [이 사이트] (http://siderite.blogspot.com/2010/03/css-less-jquery-plugin.html)가 jquery에 도움이 될 것입니다. 나는 LESS에 대한 경험이별로 없으며 jquery와의 통합 경험이 없다. – ScottS

ay, 밝혀지면 뷰포트의 높이를 계산하기 위해 수행 할 작업이 덜 필요합니다.

다음 간단한 CSS가 문제를 해결했습니다. 그러나 ScottS의 답변은 적은 검색어에 대해서는 굉장합니다.

position: absolute; 
    top: 8%; 
    bottom: 50px; 
    left: 1.5%; 
    right: 1.5%;

출처

2012-05-15 07:53:09 Kayote

액체 레이아웃에서 Less.js를 사용하여 div의 높이 계산

답변

관련 문제