2014-04-04 1 views
2

나는 여전히 매우, 아주 아마추어 인 나의 자신의 웹 사이트에서 일하고있다. 그러나 나는 스스로 해결할 수없는 문제에 부딪쳤다.사이드 바가 바닥 글에 의해 잘라 내기

콘텐츠가있는 사이드 바를 추가했는데 (특별한 것은 아니고 약간의 필러 텍스트 만 포함), 바닥 글은 내 사이드 ​​바의 텍스트는 자르고 주 내용의 텍스트는 자릅니다.

이 내 HTML입니다 :

<div id="content"> 
    <div id="main"> 
     <h1>PHP</h1> 
    </div> 
    <div id="sidebar"> 
     <h2>Sidebar</h2> 

     <p> 
     Hello, this is just some filler tekst. Blablabla blabl blabla blabla blblbla blablalbabla blablalbl.<br> 
     <br> 
     As you can see, it's positioned well. 
     </p> 
    </div> 
</div> 

<div id="footer"> 
<p>Made by me 2014</p> 
</div> 

그리고이 물건에 대한 내 CSS입니다 :

#content { 
background   : linear-gradient(#669900, #66FF99); /* Gradient -      Standaard */ 
background   : -moz-linear-gradient(#669900, #66FF99); /* Gradient - Firefox */ 
background-repeat : no-repeat; 
background-attachment: fixed; 
/*margin-left  : 185.5px; 
    margin-right  : 185.5px;*/ 
margin    : 0 auto; 
width    : 980px; 
position   : relative; 
padding    : 20px 0 25px 0; 
border-left   : 5px solid lightgreen; 
border-right  : 5px solid lightgreen; 
} 

#main { 
padding    : 0 30px 0 30px; 
margin-right  : 200px; 
} 

#sidebar { 
position   : absolute; 
top     : 0; 
bottom    : 0; 
left    : 780px; 
width    : 180px; 
float    : right; 
margin    : 0 10px 0 10px; 
overflow   : auto; 
} 

#sidebar h2 { 
text-align   : center; 
margin-left   : -15px; 
} 

죄송합니다, 나는 그것을 읽을 많이 알고,하지만 난 당신이 도움이 될 수 있기를 바랍니다.

내 문제는 : 꼬리말은 사이드 바에있는 텍스트와 함께 움직이지 않고 잘라내지만 주전산기에 텍스트가 추가되면 움직입니다.

아무도 도와 줄 수 있습니까?

최대

+0

'멀리 오버 플로우 걸릴 : 자동;' – Albzi

+0

는 [>>>를인가 (클릭 :: JSFiddle) <<<] (http://jsfiddle.net/AvBy7/) 효과를 얻고 싶습니까? – Benio

+0

@BeatAlex : 시도해 보려고 고쳐 놨어. 빼내는 걸 잊었 어. 그것을 고쳐주지 않았다. : P – MaxForce

답변

0

같은 문제가 있지만, 상대에 절대에서 위치를 변경하는 방법에 사이드 바는 게시물 아래로 이동

.sidebar-wrapper { 
    width: 300px; 
    position: absolute; 
    right: 0px; 
    margin: 25px 0; 
    padding: 0 20px; 
    border: medium none; 
    top: 0; 
    bottom: 0; 
    display: block; 
} 
+0

답변에 대한 설명을 추가하십시오. –

+0

Bro이 링크를 방문하여 해당 페이지의 맨 아래로 이동하십시오. http://www.blogolectlab2.blogspot.com 사이드 바가 겹치는 바닥 글입니다. – Zebi

관련 문제