스크롤 중간에 세 개의 세로로 스택 된 DIV

세로로 세 개의 DIV를 세로로 쌓고 가운데 div를 세로로 스크롤 할 수 있습니까? 그러나 DIV는 크기 조정이 가능한 대화 상자 안에 있기 때문에 픽셀 높이를 사용하고 싶지는 않습니다. 이런 식으로 뭔가가 (내 형편없는 ASCII 아트를 사면) :스크롤 중간에 세 개의 세로로 스택 된 DIV

+-----------+ 
| Header | 
+-----------+ 
|   ^| 
|   || 
| Scroll || 
|   || 
|   v| 
+-----------+ 
| Footer | 
+-----------+

목표는 대화 상자가 성장함에 따라, 중간 DIV 수직으로 성장하는 것, 머리글과 바닥 글 고정을하는 것입니다. 어쩌면 나는 어리 석을 뿐이며, 지난 몇 시간 동안 이걸 싸우고 있었고, 맞지 않을 것 같습니다. 3 개의 DIV는 아마도 "다른"DIV 안에 있어야 할 필요가 있습니다. 그러나 그렇게 할 때 높이를 100 %로 설정하면 중간 DIV가 커짐에 따라 커집니다. 다시 말하지만, 아마도 내가 어리석게 여기는 것이 아닙니다. 또한 아무 소용 표를 사용하여 시도했다.

도움 주셔서 감사합니다.

출처

2010-06-10 Dave

는 [이 (가 http://limpid.nl/lab/css/fixed/header-and - 네가 찾는거야? – zildjohn01

이

<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
</div>

가 편집 작업을해야 - 고정 된 위치에 머리글과 바닥 글의 경우 모달 대화

인 flexbox으로 2017 년이 재 방문

<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;"> 
    <div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
    </div> 
</div>

출처

2010-06-10 02:29:34

닫기 (다른 답변과 마찬가지로) div가 절대적으로 배치된다는 점을 제외하고는 닫습니다. 상위 요소에 "상대적"위치 지정을 사용하는 방법이 있습니까? 저는 DIV의 절대 위치 지정의 "모든 것"을 만들기 시작할 수 있다고 봅니다. – Dave

좋아요, 모달 대화 상자에 이것들이 있는데 그게 당신 문제입니까? 옳은? –

네, 지금 게시 한 내용을보고 놀고 있습니다. 편집 된 버전을 사용해 볼 것입니다. – Dave

, 이것은 지금 수행 할 수 있습니다 머리글과 바닥 글의 높이를 명시 적으로 정의하지 않아도됩니다. IE < = 10을 제외하고 현재 상당한 시장 점유율을 가지고있는 모든 브라우저에서 적어도 접두어로 작동합니다.이 사용자는 귀하가 누구에게 물어 보느냐에 따라 1-5 % 점유율을 유지합니다. 이것은 일반적으로 시각적/유용성 메커니즘이며 기능을 차단하지 않기 때문에이 경우 flexbox를 사용하면 지원되지 않는 브라우저 사용자가 페이지를 사용할 수 있어야합니다.

당신이 스타일로, (예를 들어, 신체 또는 100 % 높이와 그 자녀) 명시 적으로 높이가 사업부에서 머리글, 내용과 바닥 글을 포장하기 만 :

display: flex; 
    flex: auto; 
    flex-direction: column;

을 그리고 스크롤 창에 스타일을 적용

overflow-y: auto;

당신은 스크롤 창 그렇게 모든 수직 공간을 사용하는 성장하려면 :

flex-grow: 1;

,515,

및 (사파리와 IE 10 필요), 헤더와 풋터에 :

flex-grow: 0;

https://jsfiddle.net/ornsk10a/

출처

2017-03-14 19:03:54

스크롤 중간에 세 개의 세로로 스택 된 DIV

답변

관련 문제