Create layout to cover the whole page with top header - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Create layout to cover the whole page with top header

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">
html,body {
   margin:0;
   padding:0;
   overflow:hidden;
   height:100%;
   width:100%;
}

.sapMFlexItem {<!-- w w w .  j a va 2  s.  c om-->
   position:relative;
}

.sapMFlexBox {
   width:100%;
   height:100%;
   display:flex;
   flex-direction:column;
}

.sapMFlexItem-scroll {
   background:Chartreuse;
   overflow-y:auto;
   height:100%;
}
</style> 
 </head> 
 <body> 
  <div class="sapMFlexBox" style="background-color:red"> 
   <div class="sapMFlexItem">
     Item frozen 
   </div> 
   <div class="sapMFlexItem sapMFlexItem-scroll"> 
    <div>
      Urna augue auctor, facilisis egestas et a est, hac sit lectus, vel dis facilisis duis urna sed! Magna augue pulvinar massa sit lundium scelerisque ut, adipiscing arcu, nec, tincidunt. Tincidunt! Ac, mattis etiam sagittis dolor phasellus! Dapibus porta, dignissim et magna elementum magna sit sociis dolor magnis in? Quis tortor? Nunc parturient. Ut proin mauris, tincidunt, rhoncus ut augue aliquet? Enim facilisis adipiscing, platea pid. Sit? Lectus vel ut elit lectus sagittis a lundium, vel. Urna turpis rhoncus sed ultrices dignissim velit penatibus tincidunt vel elementum amet lorem egestas mid tortor, duis etiam tortor aliquam? Sit lorem cursus integer velit. 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials