스트레치 DIV

내 CSS :스트레치 DIV

#main { 
    display: block; 
    top: 0px; 
    bottom: 0px; 
    height: auto; 
    margin-top: 55px; 
    max-width: 100%; 
    overflow: scroll; 
    position: absolute; 
} 

#content { 
    background-color: #fff; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border: 1px solid #eee; 
    -moz-box-shadow: inset 0 0 5px #000; 
    -webkit-box-shadow: inset 0 0 5px #000; 
    box-shadow: inset 0 0 5px #000; 
    margin: 5px; 
}

내가 원하는 무엇 : enter image description here

내가 무엇을 얻을 : enter image description here

빨간색 = 절대 헤더를
화이트 = #main으로 " 파랑 "스크롤바
녹색 = # 내용이있는 텍스트와의 경계선.

나는 그것을 해결하기 매우 쉽습니다하지만 난 여전히 나이를 위해 시도한 후 관리 couldnt는 추측 : P

업데이트/단순화 jsfiddle : http://jsfiddle.net/YAgW2/9/

출처

2012-05-21 Nikom

http://jsfiddle.net/에 게시 할 수 있습니까? – verisimilitude

@ Niko, 이미지 번호 1에 표시되는 녹색 색상의 #content를 확장해야합니다. #content 너비를 설정하고 html로 게시 할 수도 있습니다. – freebird

jsfiddle link http://jsfiddle.net/YAgW2/2 /, 너 자신을 참조 – Nikom

추가 플로트 : 왼쪽; #content에 표시 문제가 해결되었습니다.

출처

2012-05-30 08:36:07 Nikom

당신이 #content 외부 #main와 위치를의 이동 할 수 없습니다 원하는 위치, 즉 #main?

출처

2012-05-21 11:35:58 VettelS

글쎄, 나는 #main div에서 #content를 스크롤하고 싶다. 그래서 나는 그럴 수 없다. – Nikom

어쩌면 나는 당신이 무엇을 의미하는지 완전히 모르겠다. #content에 적용하면 원하는대로 할 수 있습니까? – VettelS

jsfiddle 링크를 추가했습니다. http://jsfiddle.net/YAgW2/3/ – Nikom

귀하의 CSS가 있어야한다 :

#main { 
    display: block; 
    top: 0px; 
    bottom: 0px; 
    height: auto; 
    margin-top: 55px; 
    max-width: auto; 
    overflow: scroll; 
    position: absolute; 
} 

#content { 
    background-color: #fff; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border: 1px solid #eee; 
    -moz-box-shadow: inset 0 0 5px #000; 
    -webkit-box-shadow: inset 0 0 5px #000; 
    box-shadow: inset 0 0 5px #000; 
    margin: 5px; 
    width:auto; 
}

출처

2012-05-21 11:43:26

그러면 본문에서 스크롤바가 생기고 세로 스크롤 막대가 보이지 않습니다. #main이 올바른 것 같아서 그게 내가 원하는 것입니다. – Nikom

다음 CSS 사용

#main { 
    display: block; 
    top: 0px; 
    bottom: 0px; 
    height: auto; 
    margin-top: 55px; 
    max-width: 100%; 
    overflow: scroll; 
    position: absolute; 
    background-color: green; 
} 

#content { 
    white-space: nowrap; 
    padding: 5px; 
    color: white; 
    background-color: red; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border: 1px solid #eee; 
    -moz-box-shadow: inset 0 0 5px #000; 
    -webkit-box-shadow: inset 0 0 5px #000; 
    box-shadow: inset 0 0 5px #000; 
    margin: 5px; 
}

그리고 다음 HTML :

<div> <div id="main"> </div> <div id="content" style="position:absolute"> Try to extend this text </div> </div>

출처

2012-05-21 11:47:09

당신이 가지고 있기를 바랍니다. ?? –

#content가 #main에 있어야합니다. #main은 완전히 쓸모가 없습니다. – Nikom

스트레치 DIV

답변

관련 문제