2017-02-07 1 views
0

그래서 내 페이지 하단에있는 div가 있습니다. 문제는 왼쪽에있는 사이드 바가 겹쳐서 문제가되는 이유는 무엇입니까? 나는 float을 할 줄 알았다. 맞다.하지만 아무 것도하지 않는 것 같아, 고정 된 위치에 있기 때문에 나는 추측하고있다. 또한 너비를 변경하려고 시도했지만 오른쪽에서 잘라냅니다. 어떻게하면 사이드 바가없는 페이지의 나머지 부분을 차지할 수 있을까요?바닥 글을 오른쪽으로 옮기는 방법은 무엇입니까?

나는이 Look 촬영 해요 : 당신이 당신의 레이아웃을 제공하지 않았기 때문에 나는 인 flexbox를 사용하여 작은 바이올린을 만든 Example

.footer {position:fixed; bottom:0; float:right; background-color:lightgray; font-size:90%} 
+0

저는 도움을 얻기 위해 실제 html과 css를 추가해야한다고 생각합니다. 요소가 중첩되는 방식은 레이아웃에서 중요한 역할을합니다. – Harriet

+0

중첩 된 항목이 없습니다. –

+0

에서 코드를 사용하여 jsfiddle을 만듭니다. – Harriet

답변

0

바닥 글의 고정 속성은 필요하지 않습니다.

또한 footer 요소를 블록으로 지정하면 스타일을 적용 할 때 적절한 동작을 보장합니다.

.footer {위치 : 상대적; 디스플레이 : 블록; background-color : # f2f2f2; float : 오른쪽; 글꼴 크기 : 90 %; 너비 : 자동; 오버 플로우 : 숨김; }

사이드 바의 크기가 정확하지 않기 때문에 너비가 자동으로 설정되었습니다. 숫자로 설정하려면 계산을 수행해야합니다. 예 :

사이드 바 너비가 30 %이고 테두리가있는 경우 총 너비는 30.2 %입니다.

즉 1px 왼쪽 및 1px 오른쪽 테두리.

그러나 크기는 테두리 너비에 따라 달라집니다.

테두리가없는 경우 바닥 글 너비는 68.8 % 또는 68.75 %로 설정해야합니다.

+0

그럴 때, 바닥 글은 맨 위의 제목 바로 아래로 이동합니다. 그 이유는 무엇입니까? –

+0

대부분의 경우 이는 페이지의 내용이 적어서 발생합니다. '

' 이 스타일을 추가 바닥 글 전에이 요소를 추가합니다 '.clear_footer { 명확 : 모두; float : none; }' 잘하면,이 문제가 해결되기를 바랍니다. –

+0

여전히 여전히 위로 이동하고 사이드 바가 겹칩니다. 사이드 바 CSS에 문제가 있습니까? .sideBar {color : white; 배경색 : 회색; 왼쪽으로 뜨다; 너비 : 12 %; 위치 : 절대; 상단 : 0; 하단 : 0;} –

관련 문제