이 테이블 스타일 레이아웃을위한 CSS 또는 jQuery

다음은 내 페이지 레이아웃을 작성한 코드입니다. 문제는 이것이 모두 정적으로 정의 된 것입니다. 제가 원했던 것은 동적 인 것입니다. 즉,보기에 사용되는 브라우저의 크기에 따라 크기가 변경됩니다. 모든 div가 특정 페이지 차원의 크기로 고정 될 수 있다고 확신합니다. 메뉴 및 콘텐츠 창은 적합하게 조정되는 div 여야합니다. 콘텐츠 div는 필요에 따라 스크롤 할 수 있습니다.이 테이블 스타일 레이아웃을위한 CSS 또는 jQuery

CSS로이 작업을 수행 할 수 있습니까, 아니면 jQuery가 필요할 수 있습니까? 더 좋은 방법이 있습니까?

감사합니다, 에릭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
     html, body 
     { 
      margin: 0; 
      padding: 0; 
     } 

     #container 
     { 
     } 

     #toolbar 
     { 
      background-color: Gray; 
      width: 100%; 
     } 

     #PageDescription 
     { 
      position: absolute; 
      background-color: Purple; 
      width: 100%; 
      text-align: center; 
     } 
     #RestOfPage 
     { 
      position: absolute;  
      background-color: White; 
      top: 82px; 
      height: 905px; 
      width: 1800px; 
     } 
     #Footer 
     { 
      position: absolute; 
      top: 987px; 
      left: 0; 
      background-color: Yellow; 
      width: 100%; 
      height: 30px; 
     } 
     #LeftPane 
     { 
      position: inherit; 
      width: 120px; 
      background-color: Lime; 
      height: 100%; 
     } 
     #RightPane 
     { 
      position: inherit; 
      width: 100%; 
      background-color: Silver; 
      left: 120px;   
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
     <div id="toolbar"> 
      <label for="Category">Category: </label><select id="Category"></select> 
     </div> 
     <div id="Footer"></div> 
     <div id="PageDescription"> 
      <h1>Page Description</h1> 
     </div> 
     <div id="RestOfPage"> 
      <div id="LeftPane">Menu</div> 
      <div id="RightPane">Content Content Content</div> 
     </div> 
</body> 
</html>

출처

2011-07-28 Eric Gurney

[http://jsfiddle.net/QwAGV/](http://jsfiddle.net/QwAGV/)으로 재생한다. – Andrew

당신은 절대적으로 (거의) 모든 (신체의) 자식 요소를 포지션하고 있습니다, 이것은 나쁜 나쁜 것입니다 : (바로 지금, 당신의''요소는'# toolbar' 요소만을 포함하고 있습니다. .이 템플릿을 상대 위치 지정으로 다시 실행해야합니다. – Kraz

당신은 너무 #RestOfPage와 퍼센트를 기반으로 폭과 높이를 사용할 수 있습니다. 백분율 기반 레이아웃 외에도 최소 높이/최대 높이를 사용하십시오. 그것은 예기치 않게 재 배열을 막을 것입니다.

출처

2011-07-28 14:41:18

RightPane이 채워지는 크기로 고정 된 너비가되도록 LeftPane이 실제로 필요합니다. 모든 절대적인 것들이 나쁘다는 것을 이해하지만, 나는 페이지가 무엇인지 알아 내려고했습니다. 코드를 작성하는 방법이 아닌 것처럼 보입니다. 나는 많은 수의 플로트와 상대 위치 지정을 시도했지만, 항상 방해가되었습니다. –

상대 위치 지정, 부동, 투명 및 백분율을 사용하여 템플릿을 다시 실행합니다. 이상적으로,이 코드 조각의 각 빌려 편집 코드를 사용해야 무엇 :이 CSS와

#LeftPane { 
    position: relative; 
    float: left; 
    width: 13%; 
    background-color: Lime; 
    /* You should avoid using named colors, try 
    * #98ED00 or another hex value*/ 
    height: 100%; 
} 
#RightPane { 
    position: relative; 
    float: left; 
    margin-left: 2%; 
    width: 85%; 
    background-color: Silver; 
    height: 100%; 
}

이 페이지가 잘 재조정해야한다. 나중에 참조 할 수 있으려면 absolute을 사용하지 마십시오. 융통성이없고 움직이기 힘들며, 모든 요소는 명시 적으로 그렇게하지 말라고하지 않는 한 스타일 요소의 위나 아래에 내용을 놓습니다. 간단히 말해서, 그것은 당신의 컴퓨터에서만 잘 어울릴 것입니다.

또한이 솔루션은 CSS로 완벽하게 구현할 수 있습니다. jQuery는 필요하지 않습니다.

다음은 W3C 학교의 도움을 받아 향후 참조 할 수있는 관련 링크입니다.

CSS Positioning, CSS Floating, CSS Box Model

출처

2011-07-28 18:46:21 Edwin

'absolute'는'relative' 포지셔닝을 가진 요소 내의 요소에서 괜찮습니다. –

아, 맞아요. , 나는 그것에 대해 잊어 버렸습니다. 그것을 지적 해 주셔서 감사합니다. – Edwin

확실히 피할 수 있지만 그 외. 특히 그가 여기에 모든 것을 가지고 있지 않기 때문에 여기 컨테이너. –

이 테이블 스타일 레이아웃을위한 CSS 또는 jQuery

답변

관련 문제