0
저는 며칠 동안이 작업을 해왔으며 CSS, 오버플로 및 레이아웃에 대한 모든 기사를 읽었습니다.스크롤바는 다중 div 세로 레이아웃에서 하나의 div에 대해서만 크기가 조절됩니다.
배너가있는 페이지가 있습니다 (위치 : 절대). 그 아래에는 두 개의 블록 div가 포함 된 div가 있습니다. 두 번째 블록 div에는 텍스트가 포함 된 다른 div가 있습니다.
창 크기를 조정할 때 가장 안쪽에있는 DIV 디스플레이에 스크롤 막대를 표시하고 싶습니다.
모든 요소에 높이가 설정되어 있는지 게시 된 내용을 읽었습니다. overflow-y : 자동을 모든 올바른 위치에 설정했습니다. 그냥 작동하지 않습니다.
포함하는 DIV는 다음과 같습니다
http://i.imgur.com/oDHM4.png 내가 브라우저 창 (단, Y 방향)의 크기를 조정할 때 녹색 부분 스크롤하려는.
모든 디자인의 스크롤 가능한 DIV는 매우 유용하지만 ... 이처럼 열심히해서는 안됩니다. 모든 도움을 주셨습니다.
대니
MARKUP
마크 업은 매우 간단합니다 :
<body>
<div id="page-header" style='background:blue;'>page-header</div>
<div id="page-content">
<div id="configContent" style='height: inherit; background: steelblue;'>
<h1 id='panTitle'>Panel Title</h1>
<div id='panProbes' class='libPanel' style="background: maroon;">
<p>panProbes</p>
<div id="probesCT1" class="configtable" style='background: red;'>
<p class='pTblTitle'>probesCT1</p>
</div>
<div id="probesCT2" class="configtable" style='background: grey;'>
<p>probesCT2</p>
<div id='pTbl' style='background: green;'>
<div class='pRow'>1st para in pTbl</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some more data</div>
<div class='pRow'>some more data</div>
</div>
</div>
</div>
</div>
</div>
</body>
** 스타일링 ** 여기
핵심 본질에 아래로 잘라 CSS의 :
html, body {
position:absolute;
margin: 0px;
padding: 0px;
height: 100%;
width: 1010px;
overflow: hidden;
}
#page-header {
position: absolute;
left: 5px;
top: 5px;
height: 60px;
width: 100%;
}
#page-content {
width: 100%;
height: 100%;
margin-top: 95px;
}
#configContent {
height: 100%;
width: 300px;
padding-left: 0px;
border-width: 3px;
margin-left: 30px;
margin-right: auto;
}
.libPanel { height: 100%; }
#probesCT1 { width: 150px; margin: 0 auto 0 30px; }
#probesCT2 {
width: 200px;
/* height: 100%; */
margin: 0 30px 50px 30px;
padding: 0 10px 10px 10px;
}
#pTbl { overflow-y: auto; }
.pRow { margin-bottom: 10px; }
정확히 어떤 문제가 있습니까? 코드 '# probesCT2 { 너비 : 200px; 높이 : 60 %; 여백 : 0 30px 50px 30px; 패딩 : 0 10px 10px 10px; } #pTbl {overflow-y : auto; 높이 : 70 %; } ' 나를 위해 잘 작동합니다. – redDevil