사이드 바 메뉴가 페이지 하단으로 확장되지 않음 (CSS가 나를 미치게 만들었습니다.)

나는 꼬리말, 메인 컨텐츠 영역까지 펼쳐질 사이드 바를 가진 간단한 웹 사이트 레이아웃을 만들려고 노력해 왔습니다. , 그리고 그 아래에 꼬리말 (페이지의 내용이 많지 않은 경우 화면 하단에 잘 정돈되어 있음)이 있습니다.사이드 바 메뉴가 페이지 하단으로 확장되지 않음 (CSS가 나를 미치게 만들었습니다.)

시행 착오와 코드 연구 끝에 마침내 내 목표에 도달했다고 생각했습니다 ... "콘텐츠"영역에 많은 콘텐츠를 추가하려고 시도 할 때까지 그리고 사이드 바가 오래 걸리지 않을 것임을 깨달았습니다 다음 내용 ... 같은

나는 "높이 : 100 %"를 추가하는 시도

메뉴 요소로하지만 분명 트릭

#sidebar { 
width: 3em; 
position: absolute; 
left: 0; 
top: 0; 
bottom: 2.5em; 
background: #111111; 
color: #FFFFFF; }

https://jsfiddle.net/dn8srqaq/1/

방법에 대해 어떤 생각을하지 않을 것이다 고쳐?

출처

2017-11-01 Buno

감사를 추가

감사합니다 아주 많이 ..이 속임수를 썼는지, 더 마니와 Alaam을 v에! 사실 나는 실수로 "위치 : 상대적"에 세미콜론을 삭제했다. # 래퍼 div의 속성, 따라서 디자인을 위반 ... 내 잘못하고 다시 한 번 감사드립니다! – Buno

당신은 내 대답을 upvote 수 있고, 당신은 가장 환영합니다 :) –

하지만 내 담당자가 아직 15 이하인 것으로 생각하지 않는다 .. 다시 한번 감사드립니다! – Buno

그냥 부모 클래스의 position:relative을 추가 한 다음 height: 100%#sidebar에

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    min-height: 100%; 
 
    height: 100%; 
 
} 
 

 
#wrapper { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    margin: 0 auto -2.5em; /* the bottom margin is the negative value of the footer's height */ 
 
    position: relative 
 
    z-index: 0; 
 
} 
 

 
#footer { 
 
    height: 2.5em; 
 
} 
 
#footer-content { 
 
    border-top: 3px solid #000000; 
 
    height: 2.3em; 
 
    padding-top: 0em; 
 
    padding-left: 4em; 
 
} 
 

 
#footer-content a { 
 
    font: 0.8em Helvetica, Arial, sans-serif; 
 
    margin-left: 5%; 
 
    color: #444444; 
 
    text-decoration: none; 
 
    line-height: 2.5em; 
 
} 
 

 
#footer-content a:hover { 
 
    color: #000000; 
 
} 
 

 
@media screen and (max-width: 640px) { 
 
    #footer-content { 
 
    padding-left: 0.5em; 
 
    padding-top: 0.5em; 
 
    } 
 
    #footer-content a { 
 
    margin-left: 0.5em; 
 
    display: block; 
 
    } 
 
} 
 
.push { 
 
    height: 2.5em; 
 
    clear: both; 
 
} 
 

 
#content { 
 
    height: 100%; 
 
    position:relative; 
 
} 
 
#sidebar { 
 
    width: 3em; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 2.5em; 
 
    background: #111111; 
 
    color: #FFFFFF; 
 
    height: 100%; 
 
} 
 
#main { 
 
    margin-left: 3em; 
 
}

<div id="wrapper"> 
 
    <div id="content"> 
 
     <div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div> 
 
     <div id="main" style="background: #ffcccc;"> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
      Main<br /> 
 
     </div> 
 
    </div> 
 
    <div class="push"></div> 
 
</div> 
 

 
<div id="footer"> 
 
    <div id="footer-content"> 
 
    <a href="about/">About</a> 
 
    <a href="legal/">Legal stuff</a> 
 
    <a href="help/">Help</a> 
 
    <a href="contact/">Contact us</a> 
 
    </div> 
 
</div>

출처

2017-11-01 11:04:28

사이드 바 메뉴가 페이지 하단으로 확장되지 않음 (CSS가 나를 미치게 만들었습니다.)

답변

관련 문제