두 열 고정 유체 고정식 CSS 레이아웃

고정 너비가 있고 왼쪽에 고정 위치 고정 위치가있는 레이아웃을 만들려고합니다.두 열 고정 유체 고정식 CSS 레이아웃

문제는 주 콘텐츠 영역의 너비를 설정하는 것입니다. 오른쪽에서 화면을 벗어납니다. 여기에 내가있어 무엇 :

<body> <div class="left-sidebar"> sidebar </div> <div class="main-content"> main </div> </body>

CSS :

body { position: relative; } .left-sidebar { position: fixed; top: 0; left: 0; width: 220px; } .main-content { position: absolute; top: 0; left: 220px; background: #f0f0f0; width: 100%; }
나는 왼쪽에서 220px의 주요 내용 div의 시작을 가지고 있지만 윈도우 폭을 채울 수있는 방법
?

출처

2012-12-21 babbaggeii

메인 콘텐츠를 완전히 왼쪽으로 표시하도록 설정하고 사이드 바를위한 여유 공간을 남기려면 여백을 남기십시오.

.main-content { 
    position: absolute; 
    top: 0; 
    left: 0px; 
    margin-left: 220px; 
    background: #f0f0f0; 
    width: 100%; 
}

편집 : 코드를 사용해 지금 약간의 시간을 가졌다
. 나는 당신이하고 싶은 것과 잘 어울리므로 패딩 대신 왼쪽으로 여백을 남기라고 제안했다. 여백을 사용하면 콘텐츠 주위에 테두리를 추가 할 수 있습니다. 또한 실제로 콘텐츠에서 패딩을 원할 경우 정상적으로 설정할 수 있습니다. 사이드 바를 들여 쓰기 위해 패딩을 사용했다면 원하는 패딩에 220px를 추가해야합니다.

이것은 내가 패딩 대신 여백으로 작업하게하는 것입니다.

body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

.left-sidebar { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 220px; 
    border: 1px solid green; 
} 

.main-content 
{ 
    position: fixed; 
    top: 0; 
    left: 0px; 
    right: 0px; 
    margin-left: 220px; 
    background: #f0f0f0; 
    border: 1px solid red; 
}

또한 동적 드라이브를 참조하는 anser에 동의합니다. CSS를 처음 배우는 가장 좋은 방법 중 하나는 작업 스타일 시트를 사용하여 사용자의 필요에 맞게 사용자 정의하는 것입니다. 가장 큰 장점은 이미 크로스 브라우저 호환 가능하다는 것입니다. Google을 사용하여 약간의 영감을 얻으십시오.

출처

2012-12-21 16:46:32

이것이 실패하면 '패딩 : 220px'를 시도하십시오. –

감사합니다. 왼쪽 패딩 : 220px가 작동했습니다. 왼쪽의 사이드 바가 위에 오도록 Z- 인덱스를 조정해야했습니다. – babbaggeii

두 열 고정 유체 고정식 CSS 레이아웃

답변

관련 문제