위치에 CSS 너비 할당 : 고정 요소

고정 요소의 너비가 바로 아래에있는 div의 너비와 일치하도록하고 싶습니다. 머리글과 주요 콘텐츠 div를 상상해보십시오. 머리글과 내용 div가 외부 div 안에 중첩 될 때 너비 일치 문제가 발생합니다. 이 시나리오에서 각 %의 너비는 더 이상 부모 너비와 일치하지 않으며 (예 : <body> 태그) 고정 요소의 너비는 나를 혼란스럽게 만드는 것을 기반으로합니다.위치에 CSS 너비 할당 : 고정 요소

<div id="fixed"></div> 
<div id="content"></div> 

#fixed{ position:fixed; z-index:2; width:90%; 
     height:25px; background:yellow;} 
#content{ width:90%; height:300px; background:red}

여기 http://jsfiddle.net/2dudX/10/

각에 대한 코드의

http://jsfiddle.net/2dudX/4/
대 :

더 무슨 뜻인지,이 두 JS의 바이올린을 대조 설명하기 jsfiddle # 1은 노란색과 빨간색 div의 폭을 단지에
대

<div id="main"> <div id="fixed"></div> <div id="content"></div> </div > #main{ width:95%} #fixed{ position:fixed; z-index:2; width:90%; height:25px; background:yellow;} #content{ width:90%; height:300px; background:red}

주에 관계없이 브라우저의 크기를 조정하는 방법의 일치. 불행히도, jsfiddle # 2 현실 세계의 시나리오 더이고 id="content" div 일치하는 해당 id="fixed" div 수정하려면 궁금하네요.

생각하십니까? 당신이 필요로하는이 특별한 경우에 % 따라 - 단위 를 재설정해야하므로

출처

2012-08-25 tim peterson

체크 편집, 단지 폭을 일치에 대한 메모를 보았다. – CoreyRS

당신은 그것을 FIDDLE합니다 (#main %로 상대적으로 설정합니다) 고정 요소의 크기는 항상 루트 요소를 기준으로 계산이 방법을 위해 할 수있는 설정 :

#fixed { 
    width: 85.5%; 
}

그것은 경우 #main 것은 정적 요소는 주요 90 %를 기준으로, 95 %이다. 그래서 루트 요소 (1 * .95 * .9 = .855)의 너비를 계산해야합니다.

출처

2012-08-25 02:54:19 user907860

- @ caligula, 감사합니다. 그래서 당신이 말하는 것은 2 퍼센트 너비 (.95 * .90 = .85.5)의 배수입니까? –

그리고 정확하게 물체 맞춤을 설정해야합니다. 방금 이미지가 object-fit : cover로 설정되었습니다. 크기가 엉망이되었습니다. object-fit 설정 : 포함; 고쳤다. – Ralf

쉬운 하나의 친구. 고정 너비 요소는 부모로부터 잡아 당겨 졌으므로 이제 창의 너비가 상대적입니다. 따라서 두 경우 모두 고정 된 div는 항상 창의 크기에 상대적이지만 100 % 이외의 너비를 가진 부모 컨테이너에서는 고정 된 요소는 창 너비에 상대적으로 유지되지만 고정되지 않은 위치 요소는 이제 부모 너비에 상대적입니다. 따라서 비 고정 요소는 창 95 %의 90 %가되었고 고정 요소는 창 90 %의 일정한 값을 유지했습니다.

편집 :

당신이 이런 식으로 jQuery를 사용할 수있는 폭과 일치 할 경우

: 아래

$(function(){ 
    $('#fixed').width($('#content').outerWidth()); 
});

출처

2012-08-25 02:57:52 CoreyRS

계산기를 사용하지 않고도 CSS를 사용하여이 작업을 수행 할 방법이 없습니까? 나는 JS 스타일 조작을하는 것을 싫어한다. –

위치에 CSS 너비 할당 : 고정 요소

답변

관련 문제