하위 요소보다 작은 부모의 부모

this website의 사이드 메뉴와 비슷한 것을 만들려고합니다. #parent list 요소의 높이가 콘텐츠의 높이 (#child span - this jsfiddle 참조)와 정확히 같아지기 때문에 현재 #parent list 요소의 높이에 문제가 있습니다. 따라서 그것의 문맥에서 제거되지 않으며,하위 요소보다 작은 부모의 부모

<body> 
<article class="full-height row"> 
    <nav id="nav-container" class="full-height row col-sm-3"> 
     <div class="col-sm-4 full-height"></div> 
     <ul id="nav-button" class="col-sm-8 full-height vcenter"> 
      <li class="vcentered active"><span class="fontastic">0</span></li> 
     </ul> 
     <ul id="nav-navbar" class="col-sm-8 full-height display-none"> 
      <li>Projects</li> 
      <li>Passions</li> 
      <li>Close</li> 
     </ul> 
    </nav> 
    <section> 
    </section> 
    <canvas class="full-height"></canvas> 
</article></body>

#child 요소는 지정된 CSS 위치를 갖고 있지 않으며 Z- 색인을 재산 플로트 않는다. #child 요소의 높이가 #parent보다 큰 이유를 모르겠습니다.

이것은 당신의 답변 크롬 39.0.2171.95의 m 아래

감사를 실시 하였다!

출처

2015-01-11 Philippe Hebert

jsfiddle을 (를) 만들 수 있습니까? – CMPS

실행 가능한 스 니펫 (nice)이 있지만 실행되지 않습니다. 보아야 할 것이 없습니다. – GolezTrol

CMPS : jsfiddle가 생성되었습니다. 문제는 이제 더 간단 해지고 짧아졌습니다. GolezTrol : 해결, 바이올린을보십시오. –

Live demo

아이가 부모보다 키가 될 이유는 글꼴 클래스 fontastic는 line-height = 1을 가지고 있다는 것입니다. 다시 말해서, 아이가 부모에게 내 줄 높이를 1이라고 말하고 있지만 실제로는 더 많이 사용하고 있습니다. 이 문제를 해결하기 위해 설정할 수 있습니다 line-height = 1.2

출처

2015-01-11 21:20:44 CMPS

고마워, 확실히 해결 됐어! –

@PhilippeHebert 당신은 환영합니다 :) – CMPS

<span> 태그는 <li> 태그 안에 있습니다. 귀하의 우려는 실제로는 문자의 글꼴 크기가 64px. 인 사실상의 높이에 관한 것입니다. <li> 사이의 간격에 대한 우려가 있다면이 문자의 기본 간격은 <li> 사이입니다. 코드에는 아무런 문제가 없습니다. 나는 당신의 코드에서 30 분을 시도해 보았지만 디폴트 간격을 줄일 수 없었다. 희망은 분명하다.

편집 : 나는 jsfiddle에서 아무것도 보지 말아

그러므로 내가 파이어 폭스에서 드림위버 출력에서 HTML을 생성하고 난 당신이 span보다 큰 font-size 당신은

아래 이미지에서 볼 수있는 것을 말하는 것을 볼 해달라고 귀하의 span

<code>span border</code> is red and <code>li border</code> is blue and <code>0</code> is at its <code>font size</code> that is <code>64px</code>

출처

2015-01-11 20:13:43

내가 추가 한 jsfiddle을보십시오, li는 span 요소의 문자보다 작습니다. –

위의 수정 된 답변을 참조하십시오. 나는 스팬과 리의 경계를 각각 빨강과 파랑 색으로 단색으로 설정했습니다. –

뷰포트는 jsfiddle에서 너무 작습니다. 메뉴가 표시되도록 결과 창의 크기를 확장해야합니다 (@media (최소 크기 = 768 픽셀)). –

부모 li이 높이의 계산에 집어 1 개 픽셀의 테두리를 가지고있다. 필자의 경우 span의 높이는 73px (글꼴의 크기는 "0")이고 li의 높이는 74px (스팬의 내용 + 스팬의 경계)입니다.

출처

2015-01-11 20:20:22

이제 OP에 제공되는 jsfiddle에서 li의 높이는 64px 인 반면 반경은 73px입니다. 그러므로 스팬은 리가 아닌 리보다 크다. –

하위 요소보다 작은 부모의 부모

답변

관련 문제