2012-05-05 5 views
1

나는 많은 사람들이 두통을 일으키는 것을 막으려 고 노력하고 있으며, 가까운 해결책을 찾았지만 필요한 것은 아닙니다. 왼쪽 사이드 바 div와 오른쪽 기본 컨텐트 div가 필요합니다. 그 밑에는 꼬리말이 있습니다. 사이드 바에서 배경 이미지로 채워진 div의 맨 위에서 맨 아래로 스트립을 실행하고, 기본 콘텐츠 div의 높이와 높이가 같거나 짧지 만 바닥 글 위에 멈추고 싶습니다.전체 페이지가 아닌 부모를 세로로 늘립니다.

내가 뭘하고 있는지 알고 싶다면 http://lumn.net/about.html에 예제 페이지를 올려 놓았다. 링크가 활성화되어 있지 않고 코드가 지저분합니다. 저는 이번 주에 직접 CSS를 가르치고 있습니다. 적어도 내가 상상하고있는 레이아웃을 볼 수 있습니다.

나는 "높이 : 100 %"의 무리를 선언하려고했습니다 아래 문제의 사업부를 통해 <HTML>에서, 그리고 그것이 전체 페이지에 대한 스트레칭,하지만 부모의 높이를 일치하지 얻었다. "strip :"div와 그 부모에만 "height : 100 %"를 사용하면 아무 것도하지 않는 것처럼 보입니다. 나는 또한 "position : absolute; top : 0; bottom : 0"을 시도했는데, 역시 아무것도하지 않았다. div가 사라집니다 (배경 이미지에 아무 것도 없기 때문에).

그렇다면 http://www.cssnewbie.com/equal-height-columns-with-jquery/에서 찾은 jQuery 플러그인을 사용해 보았지만 올바르게 호출하는 방법이나 내 페이지에서 뭔가 작동하지 못하게하는 방법을 알지 못했습니다. 당신은 단지 콘텐츠 DIV 내부의 배경 이미지로 사이드를 넣어 만드는 주요 콘텐츠 사업부에

background: url('image.jpg') repeat-y; 
padding-left: 210px; 

를 사용에 대해이 왼쪽 아래로 실행하는 방법

+0

그러면 문제는 사이드 바가 바닥 글에 늘어지지 않는 것입니까? 문제는 정확히 무엇이 문제인지 조금 흐릿합니다. –

+0

예. 픽셀 단위로 높이를 선언 할 경우에만 표시되도록 설정할 수 있습니다. 더 긴 페이지에서는 더 길게 늘리고, 더 짧은 페이지에서는 더 길게 늘리고 싶습니다. – poetiscariot

답변

0

. 예 : http://jsfiddle.net/JMC_Creative/dMbmP/

나는 예제 페이지와 똑같은 결과를 얻지 못한다고 알고 있지만 그 점을 보완 해 줄 수 있습니까?

+0

'repeat-y'는 수직이기 때문에 필요합니다 (당신도 당신의 바이올린 에서처럼).'Repeat-x'는 작동하지 않습니다. –

+0

@JT 물론. 고마워, 그게 내 뜻이야. – JakeParis

+0

내게 일어나지 않았던 것처럼 배경을 부딪 치다. 그래도 그림자를 만들 수 있도록 div가 스트립 자체의 모양이어야한다고 생각합니다. – poetiscariot

0

상대 크기가 제대로 작동하려면 부모 개체와 자식 개체에 대해 "위치 : 상대적"을 지정해야하며 부모 개체는 고정 된 높이, 상대적 또는 절대적인 높이를 가져야합니다.

둘째, 유체 높이가 같은 열을 원하므로 주 열을 만들어야하므로 보조 열은 기본 열의 자식으로 존재해야합니다. 그런 다음 왼쪽 열에 대해서는 음수 왼쪽 여백을 선언하고 오른쪽 열에 대해서는 음수 오른쪽 여백을 선언하십시오. 그것은 모두가 사용하는 속임수입니다.

+0

그 트릭을 본 적이 없어요. 음수 여백은 무엇을합니까? – JakeParis

+0

나는 이것이 어떻게 작동하는지 보지 못한다. 예를 든다면? 내가 본 유사본 중 어느 것도 여백을 사용하지 않는다고 생각합니다. – poetiscariot

+0

이것을 확인하려면 [액체 레이아웃] (http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/)이라고합니다. 속성은 속성을 수신하기 위해 열이 가운데 열의 자식이어야 할 필요가 있다는 아이디어가 있지만 이는 반드시 문자 그대로 그 부모 열에 있어야한다는 것을 의미하지는 않습니다. – Jamie