포함 된 요소가 튀어 나오고 나머지 화면으로 확장됩니다.

div가 있고 div가 2 개 있고 "main"div 위로 마우스를 가져 가면 숨겨진 div가 표시됩니다 (안에 주 div가 있음) 스크린 하단의 나머지 부분을 채우기 위해 아래로 튀어 나와 펼쳐집니다.포함 된 요소가 튀어 나오고 나머지 화면으로 확장됩니다.

예제는 다음과 같습니다 나는 나를 위해 코드를 작성하는 사람을 요구하고 있지 않다

enter image description here

. 나는 당신이 올바른 방향으로 나를 가리킬 수있는 링크/자원을 매우 감사 할 것입니다. 나는 몇 시간 동안이 일을 해왔으며,이 효과를 얻기 위해 완전히 부서진 레이아웃을 원하지는 않지만, 단지 그것을 얻을 수는 없습니다.

이

HTML :

<div id="main"> 
    <div id="hiddendiv"> 

    </div> 
</div>

CSS : JSFiddle를 사용하여 몇 가지 더 시도 후

#main{ 
    width: 150px; height: 75px; 
    background-color: #0061cc; 
} 

#hiddendiv{ 
    visibility: hidden; 
    width: 75px; height: 100%; 
    background-color: lightgray; 
} 

#main:hover > #hiddendiv { 
    position: relative; 
    height: 100%; 
    visibility: visible; 
}

출처

2013-05-16 jay_t55

나는 나의 jsfiddle와 함께 당신을 연결시킬 것이다 - 단지 초 ... –

@SurrealDreams 여기 내가 시도한 가장 최근의 것 : http://jsfiddle.net/gNdpG/ –

나는 그 바이올린을 다음과 같이 업데이트했다 : http://jsfiddle.net/gNdpG/1/ - 나는 그것을 작동시켰다! 하지만 약간의 버그가 있습니다. 브라우저의 수직 스크롤바가 나타납니다. 내 생각에 더 많은 조정이 필요해. –

, 나는 마침내 나는

내가 성공하지 그것의 this 많은 변화를 시도했다 결과에 만족했다.

HTML :

<div id="main"> 
    <div id="hiddendiv"> 

    </div> 
</div>

CSS :

#main{ 
    width: 150px; height: 75px; 
    background-color: #0061cc; 
} 

#hiddendiv{ 
    visibility: hidden; 
    width: 75px; height: 100%; 
    opacity: .7; 
    background-color: lightgray; 
} 

#main:hover > #hiddendiv { 
    position: absolute; 
    height: 98.5%; 
    visibility: visible; 
}

출처

2013-05-16 04:34:38

좋아요, 마지막 하나 : http://jsfiddle.net/gNdpG/11/ –

다음 번에이 기능이 필요하거나 (사용자가 다른 해상도를 사용하는 경우) 도움이되지 않습니다. 더/더 많은 브라우저 창을 펼치십시오). 마진과 패딩과 나머지 부분은 여전히이 모든 부분에 혼란을 야기 할 것이고, 당신의 아이가 그것의 꼭대기에서 튀어 나올 것이기 때문에 당신은'메인 '을 움직일 수 없을 것입니다. 그리고 그 문제가 해결 되더라도 새로운 문제는 "숨겨진"자식이 이제 부모처럼 키가 크거나 *** 또는 *** 보이지 않는 경우에도 페이지 아래로 스크롤 막대를 만드는 것입니다. – Norguard

음, 좋은 소식 몇 가지 바보 같은 소식이있어.

바보 같은 소식은 모든 목적과 목적을 위해 CSS를 사용하는 것이 거의 불가능하다는 것입니다. 예를 들어, CSS를 사용하여 객체가 "나머지 높이"를 차지하도록 지정할 수 있습니다. 그 하드 코딩은 백분율로 표시됩니다.

CSS에서 마법의 총알 (calc())을 사용해야한다고해도 "현재 스크롤 위치를 기반으로하는"calc을 반드시 수행 할 필요가 없으므로 작동하지 않을 수 있습니다. 내 부모의 상단 모서리 위치, 나머지 픽셀은 화면 하단에 내 높이를 THAT "으로 설정하십시오.

난 당신이에 의해 짧은 가을 것이다 준 모든 CSS 전용 솔루션 :

는
의 100 % 스트레칭
부모님이 부모님이 위 또는 아래로 움직이지 않거나 전혀 움직이지 않을 것을 (스크롤하지 않고), 또는 밖으로 나가면 친구가 튀어 나올 때까지 스크롤 할 수 없다는 보장이 필요합니다. (또는 사용자가 위 또는 아래로 스크롤하는 동안 팝업이 화면에 머물렀다면 집에서 보았을 것입니다.)

나쁜 소식이 있습니다.

좋은 소식은 JavaScript에서 특히 어려운 문제가 아니라는 것입니다.

팝업에 getBoundingClientRect을 사용하고 반환 된 객체의 .top 속성을 사용하여 상단 가장자리를 파악할 수 있습니다.
그런 다음 document.body.scrollTop 및 window.screen.height을 사용하여 현재 위치를 파악할 수 있습니다.

예 : childEl.getBoundingClientRect().top - document.body.scrollTop은 화면 상 어디에서든 동일해야합니다. 그것을 window.screen.height에서 뺀다. 그리고 현재 당신은 현재 바닥 가장자리를 치기 위해 얼마나 큰 키가 필요한지 알 수있다. (여전히 과거에 스크롤 될 수있다.)

이것은 방탄없는 크로스 브라우저 솔루션이 아닙니다.
하지만 출발점입니다.

또한가 아닌 display:none을 사용하는 것이 좋습니다. 차이점은 자식을 너비 : 200 %로 설정하면 보이지 않더라도 페이지 측면에서 크고 추악한 스크롤바를 보게 될 것입니다. visibility:hidden은 여전히 페이지의 가장자리를 옆으로 밀고있는 경우에도 여전히 물건을 푸시합니다.

display:none은 물건을 숨기지 만 모든 것을 중단합니다.

보이지 않는 남자와 유령 사이의 차이점과 비슷하게 포장 된 지하철 차량을 쥐어 짜려고합니다. 난 당신이 찾고있는 생각

출처

2013-05-16 04:39:08 Norguard

자세한 답변을 주셔서 대단히 감사드립니다. :-) 나는 자바 스크립트를 사용하게 될지도 모른다고 생각합니다. 너무 귀찮은 것이 아니라면 http://jsfiddle.net/gNdpG/11/을보고 당신이 생각하는 것을 말해 주시겠습니까? 그것은 내가 좋아하는 것처럼 작동하는 것 같다 –

@ 조이는 - 내 대답에 대한 귀하의 대답을 좀 봐. – Norguard

....

HTML

#main{ 
    width: 150px; height: 75px; 
    background-color: #0061cc; 
} 

#hiddendiv{ 
    visibility: hidden; 
    width: 150px; height: 100%; 
    opacity: .7; 
    background-color: lightgray; 
} 

#main:hover > #hiddendiv { 
    position: absolute; 
    height: 98.5%; 
    visibility: visible; 
    left:260px; 
} 

#main:hover 
{ 
    width:400px; 
}

DEMO

내가 생을 희망

<div id="main"> 
    <div id="hiddendiv"> 

    </div> 
</div>

CSS 당신을 도울지도 모른다 .....

출처

2013-05-16 05:24:33 user2361114

포함 된 요소가 튀어 나오고 나머지 화면으로 확장됩니다.

답변

관련 문제