사이드 바 내 학교 인트라넷을 리메이크하기 위해 노력하고있어</p> <p>, 바닥 글 (내 영어 죄송합니다)

Question

안녕 모두에 갈 수 없습니다. 내가 사이드를 만들려고 할 때 , 그것은 바닥 글 않을 것입니다

이 같은 사이트 맵 싶습니다 : 당신이 genrated있는 것 위젯을 가지고있는 콘텐츠 래퍼에

____________________________ 
    |   top_bar   | 
    ____________________________ 
    | S |     | 
    | I |     | 
    | D |     | 
    | E |     | 
    | B | content_wrapper | 
    | A |     | 
    | R |     | 
    |  |     | 
    |  |     | 
    |  |     | 
    |  |     | 
    ____________________________ 
    |   footer   | 
    ____________________________ 

을 dynmically PHP를 사용하지만 나중에. 위젯을 많이 넣을 때 사이드 바는 마지막 메뉴 블록 이후에 멈 춥니 다. 위젯이 많이있을 때 사이드 바가 바닥 글과 바닥 글 사이에서 동적으로 크기가 조정되기를 원합니다.

이 내 코드입니다 :

https://www.dropbox.com/s/r6opwlekb6ip1qi/school_intra.zip?dl=0

감사합니다!

Answer 1

가장 쉬운 방법은 display table 및 display table-cell (IE8 이상 및 다른 모든 브라우저에서 지원됨)을 사용하는 것입니다.

랩 사이드 바 주위 사업부와 주요 내용 : 다음

<div class="main"> 
     <div class="sidebar"> 
       <!-- etc... --> 
     </div> 
     <div class="content-wrapper"> 
       <!-- etc... --> 
     </div> 
</div> 

(새로운 규칙을 기존 규칙 또는 수정) 원래 규칙 후이 CSS을 추가

.main { 
    width:100%; 
    display:table; 
} 
.content-wrapper,.sidebar { 
    float:none; 
    display:table-cell; 
    vertical-align:top; 
} 

'head'를 의미하고 바닥 글이 본문 요소 외부에 있고 허용되지 않는 경우 문서 머리글에 머리말 요소가 있으므로 유효성 검사기를 통해 HTML을 실행하십시오. IE8을 지원하는 경우 사용중인 새로운 html5 요소에 대한 html5 shiv가 필요합니다.

디스플레이가 1024px보다 큰 스타일을 사용하고 스타일이 768px 미만이지만 그 범위 사이에 아무것도 없으므로 CSS가 조금 이상합니다.

일반적으로 모든 기기에 대해 기본 CSS를 사용하고 필요한 경우 미디어 쿼리를 사용하여 수정합니다 (여러 css 파일이 아닌 동일한 css 파일에있는 것이 바람직 함).

Answer 2

귀하의 요구 사항에 따라 당신은 CSS 위치로 라운드를 재생해야합니다.

http://jsfiddle.net/amith009/eqxdzfz4/2/