Max height container with very tall fixed position container inside it - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Fixed Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Fixed Position

Description

Max height container with very tall fixed position container inside it

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#container {<!-- w w  w.  ja v a 2s.c o  m-->
   width:601px;
   background-color:Chartreuse;
   max-height:301px;
   height:301px;
   overflow:hidden;
}

.tall-container {
   background-color:yellow;
   position:fixed;
   right:0px;
   width:201px;
   height:301px;
   overflow-y:hidden;
}

.tall {
   height:5001px;
}
</style> 
 </head> 
 <body> 
  <div id="container"> 
   <div class="tall-container"> 
    <div class="tall">
      Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br>Lorem 
     <br> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials