flexbox与父滚动嵌套窗格只

flexbox与父滚动嵌套窗格只

问题描述:

我想尝试一个示例,我希望在父窗格上有一个滚动条,即使子窗格的内容更多。在我写的例子中,我需要在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>

这是一个有点困难的工作你想达到什么样的,但关键是,你需要设置的高度,如果你希望元素有滚动条。没有有限的高度,元素将伸展以容纳内容。

<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    #main { 
 
     width: 100%; 
 
     height: 100%; 
 
     border: 1px solid #c3c3c3; 
 
     display: flex; 
 
     flex-direction: column; 
 
    } 
 
    
 
    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; 
 
     height: 200px; 
 
    } 
 
    
 
    #child1 { 
 
     border: 1px solid red; 
 
     background-color: grey; 
 
     height: 200px; 
 
    } 
 
    
 
    #child2 { 
 
     border: 1px solid green; 
 
     background-color: violet; 
 
     height: 200px; 
 
    } 
 
    </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>