너비 100 % (포지션 고정)

사이드 바가있는 페이지가 있습니다. 테이블이있다. 표가 얼마나 큰 지 상관없이 화면 하단에 한 줄을 보여주고 싶습니다. 이 행은 표와 동일한 폭을 가져야합니다. 여기 너비 100 % (포지션 고정)

내가 무엇을 시도했다, 그러나 성공하지 :

<div style="width: 100%; position: relative;"> 
    <table> 
      ... 
    </table> 

    <!-- this div will be width as whole page, not as table --> 
    <div style="width: inherit; position: fixed; bottom: 0;">Wuah!</div> 
</div>

어떻게 만드는 것이 여기에 :)
를 작동하는 실제 예입니다 pls는 몇 가지 조언을 말해, 사이드 포함 : http://other.dttrading.sk/orders.htm

출처

2012-08-07 Draex_

당신이 질문을해야합니까 (테스트되지 않음)? –

@amiregelz 문제는 사이드 바입니다. 페이지에 추가되면 마지막 줄이 표보다 넓어지고 옆줄을 간섭합니다. –

사이드 바를 포함하여 관련 코드를 게시 할 수 있습니까? – amiregelz

문제는 fixed 요소가 뷰포트가 아닌 부모에 대해 고정되어 있으며, 그들도 뷰포트의 폭을 상속 할 수 있습니다. DOM을 검사하여 고정 바닥 글이 <body>과 정확히 일치하는지 확인할 수 있습니다.

한 가지 가능한 해결 방법 :

바닥 글 사이드 바
바닥 글 안에 다른 컨테이너를 추가 뒤에 있도록 일부 z-index 값을 설정 바닥 글
을 왼쪽 정렬 그것을 left: 0을주고, 그것을 상쇄 오른쪽으로 이동하고 내용을 가운데에 배치합니다.

출처

2012-08-07 23:27:06 bfavaretto

z-index가 위치에 대해 작동하지 않습니다. 고정 div - 항상 위에 있습니다 –

@ PeterDraexDräxler'z-index'는 약간 까다로울 수 있지만 고정 요소에는 적용됩니다. [demo] (http://jsfiddle.net/SbVUN/)를 참조하십시오. – bfavaretto

실례에 z- 인덱스를 설정하는 방법을 알려 줄 수 있습니까? –

<div> 테이블을 포함하여 형식을 지정해야하며 표와 같이 형식을 지정하기위한 별도의 테이블은 필요하지 않습니다.

<div style="width: 100% position: relative;"> 
    <!-- this next div is what you should use to format the table and line --> 
    <div style ="width: how big you want your table AND line"> 
    <table> 
      ... 
    </table> 
    </div> 
    <!-- this div will be width as whole page, not as table --> 
    <div style="width: inherit; position: fixed; bottom: 0;">Wuah!</div> 
</div>

출처

2012-08-07 22:49:41 Dylan

몇 가지 예를 들어 주시겠습니까? –

너비 100 % (포지션 고정)

답변

관련 문제