CSS

를 사용하여 열을 스트레칭 도움이 나는 그것의 오른쪽에있는 화면과 내용에 왼쪽 메뉴 (열)를 갖는 아주 기본적인 요구 사항을 가지고있다. 기본 코드를 작성했지만 정확히 내가 원하는 것을 해결하지 못합니다. 우선 여기에 코드가 있습니다.CSS

html로

<body> 
<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="left-column">Left Column</div> 
    <div id="content">@RenderBody()</div> 
</div> 
</body>

이 내용을 배치 않지만 나는 다음을 찾고 있었다

html, body 
{ 
    margin:0; 
    padding:0; 
} 

#wrapper 
{ 
    margin:0 auto; 
    width:1000px;   /* width of whole page */ 
} 

#header 
{ 
    height:25px; 
    background-color:lightblue; 
} 

#left-column 
{ 
    float:left; 
    width:200px; 
    background-color:maroon; 
} 

#content 
{ 
    float:left; 
    width:800px; 

    background-color:lightgray; 
}

CSS는.

왼쪽 메뉴 콘텐츠 열에 가 있음 (메뉴 또는 콘텐츠의) 작은 DIV가 큰 DIV 으로 일렬 스트레칭한다 동등한 높이 있어야한다. 사업부 모두의 내용이 브라우저 화면 높이보다 작은 경우
, 다음 사업부 (메뉴 및 콘텐츠) 모두는 화면 높이에 맞게 자신을 스트레칭한다.

어느 하나가 상기 두 조건을 달성하기 위해 필요한 변경을 제안 할 수 있습니다.

출처

2012-11-08 Jatin

Demo

안녕 Nirvan 당신은

html, body{ 
margin:0; 
padding:0; 

} 

#wrapper 
{ 
    margin:0 auto; 

} 
#header 
{ 
    height:25px; 
    background-color:lightblue; 
} 

#left-column{ 
background:red; 
    position:absolute; 
    top:25px; 
    left:0; 
    width:200px; 
    bottom:0; 
width:200px; 
} 
#content { 
background:green; 
    position:absolute; 
    left:200px; 
    right:0; 
    top:25px; 
    bottom:0; 
}

쓰기이 CSS를이

쓰기 등 쉽게 HTML을 할 수

<div id="wrapper"> <div id="header">Header</div> <div id="left-column">Left Column <br >Left Column <br >Left Column <br ></div> <div id="content">@RenderBody() </div> </div>

Live Demo

출처

2012-11-08 05:09:23

Rohit, 답장을 보내 주셔서 감사합니다. 그것은 내 첫 번째 요구 사항을 해결합니다. 기둥이 늘어나는 것 같습니다. 그러나 기둥이 화면 하단까지 늘어나지 않습니다. 그것들을 창 하단으로 늘릴 수 있습니까? – Jatin

@Nirvan는이 http://tinkerbin.com/PFyvkHiz –

Rohit 싶어, 네, 정확히 무엇을 원했다.그럼에도 불구하고 콘텐츠 div의 콘텐츠가 매우 큰 경우 어떻게되는지보기 위해 테스트 할 것입니다. 다시 한번 고마워. – Jatin

여기서 가짜 열을 사용하지 않고, 용액 중 하나 691,363,210. enter link description here에 설명 된 바와 같이 음수 여백 개념을 사용합니다. 아래 코드는 질문에서 언급 한 두 가지 요구 사항을 모두 충족합니다.

html로

<body> 
<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="container"> 
     <div id="left-column"> 
      Left Menu 
     </div> 
     <div id="content">@RenderBody()</div> 
    </div> 
</div>

CSS를

html, body 
{ 
    margin:0; 
    padding:0; 
    height:100%; 
} 

#wrapper 
{ 
    margin:0 auto; 
    width:1000px; 
    height:100%;  
} 

#header 
{ 
    width:1000px; 
    position:fixed; 
    top:0; 
    height:25px; 
    background-color:lightblue; 
} 

#container 
{ 
    overflow:hidden; 
    min-height:100%; 
} 

#container #left-column 
{ 
    float:left; 
    padding-top:25px; 
    background:maroon; 
    width:200px; 
    padding-bottom:5000px; 
    margin-bottom:-5000px; 
} 


#container #content 
{ 
    float:left; 
    padding-top:25px; 
    background-color:lightgray; 
    width:800px; 
    padding-bottom:5000px; 
    margin-bottom:-5000px; 
}

답변

관련 문제