최신 프로젝트에 부트 스트랩의 최신 버전을 사용하고 있습니다. 헤더 섹션에 갇혀 있습니다. 로고 높이에 따라 메뉴 높이를 자동으로 조정하여 어떤 크기의 로고도 메뉴 높이에 영향을 미치지 않도록하고 싶습니다.
부트 스트랩으로 가능할지 여부도 모르겠습니다. javascirpt로 높이를 조정하는 방법을 알고 있지만 자바 스크립트는 원하지 않습니다. 높이 조절 방법이 있을까?
<div id="main-header">
<div class="container">
<div class="row">
<div class="col-lg-4 logo">
<hgroup>
<img src="http://placehold.it/141x55" />
</hgroup>
</div>
<div class="col-lg-8 main-menu">
<div class="menu clearfix">
<ul class="nav nav-pills pull-right">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Work</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS :
#main-header{
background-color: #efefef;
height: auto;
}
#main-header .logo{
margin: 10px 0;
}
#main-header .main-menu{
height: auto;
}
#main-header .menu li a{
padding: 0 20px;
line-height: 100%;
}
다음은 내가 시도하는 바이올린입니다. JSFIDDLE
height:100%css 속성을 사용하여이를 수행 할 수 있습니다 . height : 100 %는 항상 상위 요소의 높이를 덮습니다. 따라서 메뉴 div가 높이를 가리도록하려면 메뉴에 height : 100 %를 지정합니다.
<div class="menu clearfix" style="height:100%">
<ul class="nav nav-pills pull-right">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Work</a></li>
</ul>
</div>
이렇게하면 이제 메뉴가 상위 div의 전체 높이를 차지합니다. 즉 <div class="col-lg-8 main-menu">, 필요한 경우 다른 요소에 대한 접근 방식을 따를 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다