내 웹 페이지의 맨 아래에 사이드 바를 표시하려면 어떻게합니까?

Question

처음으로이 보드에서 쉽게 이동하십시오.

나는 미디어 쿼리를 사용하여 내 웹 사이트를 http://sartorialequity.com/에 반응 적으로 만들려고 노력해 왔습니다. 그러나 내 오른쪽 사이드 바는 현재 내 콘텐츠 위에 표시되지만 내 콘텐츠의 맨 아래에 표시하고 싶습니다. 내가 지금까지 시도했습니다

#container { 
      width: 960px; 
      margin: auto; 
     } 

#content { 
      width: 66.67%; 
     } 

#sidebar { 
      width: 260px; 
      float: right; 
      top: 70px; 
      position: relative; 
     } 

@media screen and (max-width: 768px) { 
#container { 
width: 91% 
     } 

#content { 
float: none; 
width: auto; 
line-height: 135%; 
     } 

#sidebar { 
float: none; 
width: auto; 
top: 10px; 
     } 

<div id="container"></div> 
<div id="sidebar"></div> 
<div id="content"></div> 

용액 :

1. 디스플레이 사용 : 테이블 바닥 글 그룹

#content-sidebar-wrap {display:table;} 
#content {display:table-header-group; float: none; width: auto} 
#sidebar {display:table-footer-group; float: none; width: auto} 

을 여기

내 코드의 단순화 된 버전입니다

휴대 전화에서는 콘텐츠 페이지 아래에 사이드 바를 표시하는 데 성공했습니다. 적어도 메인 페이지에는 표시됩니다. 그러나, 그것은 PermaLink Pages의 내용과 사이드 바가 헤더 너비 이상으로 확장되도록했습니다. = "내용"휴대 전화에

<div id="container"> 
<div id="content"></div> 
<div id="sidebar"></div> 
</div> 

2. 정리 사업부 아이디 = "사이드 바"와 DIV ID는이 콘텐츠 아래에 표시 세로 막대를 얻기에 성공했다. 그러나 내 PC의 브라우저 창에서 사이드 바가 페이지 하단에 나타납니다.

나는 정말 감사드립니다. 감사!

Answer 1

내용물 div은 마크 업에 맨 앞에 표시되어야합니다. 그것은 당신이 가지고있는 문제를 해결할 것입니다.

<div id="content"></div> 
<div id="sidebar"></div> 

Answer 2

콘텐츠 모양은 단순히 원시 html 순서와 관련이 없습니다. 스타일은 많은 변화를 가져올 수 있습니다.

먼저이 레이아웃을 사용하려고 :

<div id="content"></div> // Content div comes first 
<div id="sidebar"></div> // Then Comes Sidebar. 

는 기억이 레이아웃이 바로 페이지에 사이드 바를 사용할 수 없습니다 의미하지 않는다. content div가 떠 있지 않으면 sidebar은 content 다음에 올 것이며 페이지 하단에서 오른쪽으로 플로팅합니다. 따라서 content div를 왼쪽으로 플로팅해야합니다. 그러면 오른쪽으로 33.3334 %의 공간이 생겨 sidebar으로 채워집니다.
그러나 모바일 장치의 경우 div35에 float:none을 설정 했으므로 원시 html의 순서는 사이드 바를 아래쪽에 표시하는 역할을합니다.

따라서, 약간의 스타일 변화를 시도 :

#content { 
    float: left; //This line will bring the change. It is necessary. 
    width: 66.67%; 
    width: calc(100% - 294px); //you may or may not add this line 
    height: 100%; 
    font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; 
    line-height: 160%; 
}