Navbar 링크는 모두 키가 큰 것과 비슷해야합니다.

Question

4 개의 링크가있는 탐색 모음이 있습니다. 각각의 폭이 NAV의 전체 폭의 25 % 인 반면 링크 텍스트는 2 행으로 다른 긴 스팬 될 수 있기 때문에보다

, 높이에 this example 같이 고정되지 않는다. 윈도우가 작아 충분한 경우

#first-level-navigation .mega-link { 
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #eaeeee 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    border: 1px solid #cccccc; 
    padding: 0; 
    text-transform: uppercase; 
    width: 25%; 
} 

#first-level-navigation .mega-link a { 
    color: #00643c; 
    display: inline-block; 
    padding: 10px; 
    text-align: center; 
    text-decoration: none; 
    width: 100%; 
} 

나는 2 행에, 광산과 같은 경우에 하나의 키 높이에 마지막 연결 범위를 확장합니다 작은 링크의 높이를하고 싶습니다. 그것을 얻는 방법, px에있는 강요 한 강요하는 고도? 나는 height:100%과 노력하지만

Answer 1

사용할 수 display:table/table-cell :

#first-level-navigation{ 
    display:table; 
} 

.mega-link{ 
    display:table-cell; 
    vertical-align:middle; 
} 

JSFiddle

끄트머리, 당신은 를 추가해야 브라우저 접두사에 대한 box-sizing: border-box - here's a good article about it by Paul Irish.

Answer 2

(커피 스크립트에서) jQuery를 함께 unuseful이었다

이

if $('html').length > 0 
    link = $('.mega-link') 

    # Determine heights 
    link_height = link.height() 

    # Applys heights 
    link.css "height", link_height 

    # when window resizes, calculate and apply again 
    $(window).on 'resize', -> 
     # re-determine height 
     link_height = link.height() 

     # Apply heights 
     link.css "height", link_height