자라는 상자가 작동하지 않습니다

오른쪽 상자의 내용이 전체 래퍼를 확장하는 것처럼 왼쪽 상자가 좋아 ... 세로 확장을 의미합니다 .... 가로가 아닙니다!자라는 상자가 작동하지 않습니다

내가 그것을 어딘가에 CSS의 타당성의 문제 확신 ... 당신이 도와 드릴까요?

2010-11-29 menardmam

페이지를보고, 당신이 요구하는지 알아낼 수 없습니다. 어떤 상자를 성장시켜야합니까? – Greg

수레를 피하십시오. 수레는 이미지와 텍스트 용입니다. 사람들은 종종 절대 위치가 훨씬 적합한 부유물을 사용합니다.

기본적으로 왼쪽 패널만큼 넓은 너비의 오른쪽 패널에 여백을 추가하는 것입니다. 그런 다음 오른쪽 창 상단에 왼쪽 창을 절대 위치시키고 컨테이너 높이만큼 높이를 100 %로 설정하십시오. 컨테이너는 내용과 동일한 높이를 갖습니다.

여기 당신을 위해 샘플입니다 :

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style type="text/css"> 
     body { width: 800px; margin: 0px auto; position: relative; } 

     #nav { 
     width: 200px; height: 100%; 
     position: absolute; left: 0px; top 0px; 
     background: #F00; 
     } 

     #content { 
     margin: 0px 0px 0px 200px; 
     heigth: 1000px; 
     background: #0F0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="nav"> 
    </div> 
    <div id="content"> 
    </div> 
    </body> 
</html>

출처

2010-11-29 22:06:56 Jan

당신은 아마도 '유체 열 레이아웃 "을 찾고 (구글), 당신은이 같은 마크 업 뭔가 배열하여 가장 간단하게이를 수 있습니다 전체 페이지의 폭과

<ul style="float:left; width:35%;"> 
    <li><a href="">Link 1</a></li> 
    <li><a href="">Link 2</a></li> 
    <li><a href="">Link 3</a></li> 
</ul> 
<div style="float:left; width:65%;"> 
    <p>Lots of content goes here</p> 
</div>

을 (브라우저 크기를 조정하는 것 같이) 커지면 35 %와 65 %의 너비 요구 사항을 충족하는 '열'이 모두 늘어납니다. 위의 예제는 Internet Explorer, 요소의 기본 여백/여백 또는 부동 소수점 여유를 고려하지 않은 빠른 예제 마크 업입니다. 이상적으로 두 열의 스타일은 '클래스'를 통해 설정됩니다. <div class="column-a"> 및 모든 클래스가 외부 CSS 파일에 정의되어 있습니다.

내가 정교하게 말하면 알려주세요.

편집 : 왼쪽 열의 배경색을 아래쪽으로 늘려 '같은 높이 열'의 시각적 효과를 부여 하시겠습니까? 그 경우가 this link is great이고 알아야 할 모든 것을 다뤄야합니다.

출처

2010-11-29 20:38:23 danjah

나는 수직 스케일링을 의미합니다 .... 수평이 아닙니다! – menardmam

자라는 상자가 작동하지 않습니다

답변

관련 문제