특별 2 CSS가있는 열 레이아웃

나는 특별한 2 열 레이아웃을 고안해 냈습니다.특별 2 CSS가있는 열 레이아웃

는 기본적으로 이러한 요구 사항

고정 너비와
높이 100 %
머리글과 바닥 글 항상 표시
2 열 내용 (홈페이지 - 오른쪽)을 중심으로
홈페이지 컬럼 스크롤 오버플로에
오른쪽 열 고정

여기에 제가 지금까지 가지고있는 코드가 있습니다. 난 단지 전체 레이아웃을 집중시킬 수 없었습니다. "여백 : 0 자동 www.onlinesportcenter.com

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<title>SPECIAL 2 COLUMN LAYOUT</title> 

<style type="text/css"> 

body { 

    margin:0; 
    border:0; 
    padding:0; 
    height:100%; 
    max-height:100%; 
    background:#fff; 
    font-family:arial, verdana, sans-serif; 
    font-size:76%; 
    overflow: hidden; 

} 


* html body { 

    padding:120px 0 20px 0; 

} 

#header { 

    position:absolute; 
    top:0; 
    left:0; 
    width:1004px; 
    height:119px; 
    overflow:auto; 
    background:#73a2bd; 
    border-bottom:1px solid #35759a; 
    text-align:center; 

} 

* html #header {height:120px;} 


#header p { 

    color:#fff; 

    margin:2px 0 0 0; 

} 

#header ul { 

    clear:both; 
    text-align:center; 
    border-top:1px solid #73a2bd; 

    } 



#header ul { 

    margin:0; 
    padding:0; 
    list-style-type:none; 
    background:transparent; 
    height:3em; 

    } 



#header ul li { 

    display:inline; 
    color:#73a2bd; 

    } 



#container { 

    font-family: Arial, sans-serif; 
    font-size: 1.2em; 
    position:fixed; 
    top:120px; 
    left:0; 
    bottom:20px; 
    right:0; 
    background:#fff; 
    padding:0; 
    width:1004px; 

} 



* html #container { 

    height:100%; 
    width:1004px; 

} 

#container img {margin:5px;} 


#main { 
    width:774px; 
    height:100%; 
    float:left; 
    overflow:auto; 
} 

#right { 
    width:228px; 
    height:100%; 
    float:right; 
    border-left:1px solid #73a2bd; 
    border-right:1px solid #73a2bd; 
} 



#footer { 

    position:absolute; 
    bottom:0; 
    left:0; 
    width:1004px; 
    height:19px; 
    overflow:auto; 
    text-align:center; 
    background:#73a2bd; 
    border-top:1px solid #35759a; 

} 

* html #footer {height:20px;} 

#footer p { 

    color:#fff; 
    margin:2px 0 0 0; 

} 

</style> 

</head> 


<body> 

    <div id="header"> 

     <p>HEADER</p> 

    </div> 

    <div id="container"> 


     <div id="main"> 

      <p> 
       MAIN 
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 

      </p> 

     </div> 
     <div id="right"> 

      <p> 
       RIGHT 
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
      </p> 

     </div> 

    </div> 

    <div id="footer"> 

     <p>FOOTER</p> 

    </div> 


</body> 

</html>

출처

2012-02-16 user1212592

랩 다른 사업부의 모든 최상위 요소 (헤더, 컨테이너와 주)에서 라이브
, 그것을 설정 폭과 다음 마진을 제공 ; "

편집 : 나는 내 말을 되 찾는다. 나는 당신의 초기 문제를 오해했습니다. 머리글과 바닥 글의 경우 위쪽 또는 아래쪽에 고정 된 절대 위치 div에 포장해야합니다. 요소의 너비가 100 %인지 확인하십시오. 그런 다음 내부 요소에 여백을 "0 자동"으로 설정하십시오. 나는 초 안에 JS Fiddle 예제를 게시 할 것이다.

편집 2 : http://jsfiddle.net/NfSKf/

출처

2012-02-16 01:08:34

이 도움을 주셔서 대단히 감사합니다 : 여기에 지금까지 무엇을 가지고 있습니다. 그것은 모든 주요 브라우저에서 작동하는 것 같습니다. 누군가 레이아웃을 개선하기 위해 다른 개선 사항이 있습니까? – user1212592

특별 2 CSS가있는 열 레이아웃

답변

관련 문제