0
我想嘗試一個示例，我希望在父窗格上有一個滾動條，即使子窗格的內容更多。在我寫的例子中，我需要在id爲「khaki」的div上有一個滾動條，儘管其ID爲「child1」和「child2」的每個子div都有一個單獨的滾動條。flexbox與父滾動嵌套窗格只
任何機構可以請儘量幫我達致這
感謝&問候 sivakiran乙
這裏是代碼。
<html>
<head>
<style type="text/css">
#main {
width: 100%;
height: 100%;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: column;
}
#main div {
flex-grow: 1;
overflow: auto;
min-height: 50px;
/* this value has been kept here such that even though the content is very less than this the pane will have some heigth other wise due to flex-grow these panes will not enough space because of which scrolling is coming automatically even for small content. Please remove this and check the output once so that we can see the difference */
}
body {
overflow: hidden;
}
#khaki {
display: flex;
flex-direction: column;
border: 2px dotted black;
}
#child1 {
border: 1px solid red;
background-color: grey;
}
#child2 {
border: 1px solid green;
background-color: violet;
}
</style>
</head>
<body>
<div id="main">
<div id="coral" style="background-color:coral;">white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color
white color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite colorwhite white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
colorwhite color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite color white color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white colorwhite colorwhite colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white color white colorwhite colorwhite colorwhite colorwhite
colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite</div>
<div id="lightblue" style="background-color: lightblue; flex-grow:0;" id="myBlueDiv">Hiiiiiiiiiii</div>
<div id="khaki" style="background-color:khaki;flex-grow:2;">
This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background
color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This
should get background color as khakhiii This should get background color as khakhiii
<div id="child1">
child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild
1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1
of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild
1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1
of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild
1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of
khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki
child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1
of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki
child 1 of khaki
</div>
<div id="child2">
child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki
child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of
khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki
child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of
khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki
child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of
khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
</div>
</div>
<div id="pink" style="background-color:pink;">pink</div>
<div id="grey" style="background-color:lightgrey;">light grey</div>
</div>
<script type="text/javascript">
(function() {
console.log(document.querySelector("body").clientHeight);
})();
</script>
</body>
</html>