새 미디어 화면으로 div 높이 변경 CSS

Question

페이지 here에는 3ems의 패딩이 바디에 추가 된 고정 헤더 및 상자 강조 상자 섀도우가 있지만 랩톱 해상도의 상대 위치로 변경하면 더 많은 페이지에서 머리글 텍스트가 새 CSS로 약간 아래로 이동하고 머리글 강조 표시가 1 픽셀로 너무 높아 보이지 않습니다.

아주 미묘하지만 눈치 채실 수 있습니다.

body { 
    padding-top: 0; 
    } 

.headerHighlight, .header { 
    position: relative; 
    } 

#main-content { 
    padding-top: 0.7em; 
    } 

어떤 아이디어가

Answer 1

가 .headerHighlight 요소는 .header 요소의 내부에 있어야한다 감사 : 여기에 새로운 CSS입니다

이

<div class="header"> 
    <div class="headerHighlight"></div> 
</div> 

.headerHighlight 요소는 절대 위치해야하고, .header 요소 상대적으로 위치를 유지해야합니다. .header { 위치 : 상대적; }

.headerHighlight { 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
}