잘 작동 오버 플로우 블록 (를)

Question

은 몇 가지 문제와 동일한 내용으로 8 개 부동 블록 거리로 만들려면 :

• 나는 패딩을 사용하는 경우 : 그것을 "경계"를 만들 10px에 대한 sideblock의 .inner을 내가 블록에 커서를 놓으면
• 좋은 (이 disapeared처럼 보일 것 패딩 - 아래) 작동하지 않습니다 - 그것은 상단에 출연 할 수 없으며, othes는

을 차단 움직이지 어떻게 블록 작업을한다 잘? HTML :

<div class="sideblock"><div class="style-menu"><div class="inner"> 
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div> 

CSS : 여기

.sideblock { 
    width: 220px; 
    height: 80px; 
    overflow: hidden; 
    margin: 10px; 
    float: left;  
} 

.sideblock .inner { 
    background: #ffffff; 
    padding: 10px;} 

.sideblock .style-menu { 
    padding: 3px; 
    background: #157ba1; 
    background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);} 

.sideblock:hover { 
    box-shadow: 0px 0px 5px #000; 
    overflow: visible; 
    height: auto;} 

내 코드입니다 - 지원

에 대한 http://jsfiddle.net/2HqZV/1/

들으

Answer 1

그럼 난 당신이이 같은이 원하는 가정 div가 맴돌 았지만 작게 보이면 어떻게됩니까?
div에 자체 오버플로를 사용하지 않아도됩니다. 이는 지정된 높이에 대한 응답이어야합니다.

요소를 검사 할 때 요소의 높이를 동심으로 볼 수 있습니다. 당신이 더 찾을 때 당신이 당신의 패딩 볼 이제

.sideblock .style-menu { 
    height: inherit; 
    padding: 3px; 
    background: #157ba1; 
    background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%); 
} 

: 당신의 .style-menu 사업부가 .sideblock와 같은 높이를하지 않았 음을 당신은 당신의 스타일 메뉴에 상속 높이를 추가 할 수있는 해결하기 위해, 볼 수 있습니다 .inner에서 div 요소는 실제 지정된 높이를 소비합니다. 원하는 것은 패딩을 인라인으로 만드는 것입니다. 당신은 easially이 box-sizing로 이것을 할 수 있습니다. 그리고 마지막으로 당신은 overflow을 추가하여 텍스트를 '잘라 내기'를 할 수 있습니다

.sideblock .inner { 
    background: #ffffff; 
    padding: 10px; 
    height: inherit; 
    box-sizing: border-box; 
    overflow: hidden; 
} 

jsFiddle

나는 이것이 당신이 무엇을 의미하는지 바랍니다. BTW

, 난 다른 모든 요소를 ​​무시하고 소비하는 모든 요소를 ​​수 있도록 매우 독특한 테두리 ^^

---

업데이트 그래서

를 추가하는 방법을 찾아, 당신은 그것을해야 문서 플로우의 position: absolute;으로이 작업을 수행 할 수 있습니다. 그러나 절대 위치가 실제로 다른 모든 요소를 ​​무시하지만, 당신은 같은 위치를 갖고 싶어. 요소에는 오프셋 위치 지정이 없으므로 (화면 상단, 오른쪽, 아래쪽, 왼쪽) 화면 왼쪽 모서리에 배치됩니다 (DOM의 유일한 요소 인 것처럼 동작).
요소 위치를 유지하려면 .sideblock을 변경하지 말고 내용을 변경하십시오. .style-menu :

.sideblock:hover .style-menu 
{ 
    box-shadow: 0px 0px 5px #000; 
    position: absolute; 
} 

이 요소는 다른 요소 위에 놓이기 때문에 여기에 그림자를 추가하고 싶습니다.

이제는 내용이 절대적으로되어 문서 흐름에서 벗어 났으므로 .sideblock 요소에는 내용이 없습니다.

.sideblock:hover 
{ 
    min-height: 80px; 
    height: auto; 
} 

jsFiddle