CSS 100% height columns with page scrollable - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

CSS 100% height columns with page scrollable

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 {<!--from www  . jav a  2s.c  om-->
   position:relative;
   overflow: hidden;
   width: 600px;
   margin: 0 auto;
   border: 1px solid black
}
nav, section, sidebar { float: left; width: 200px}
section { background: red}
sidebar { background: green;position: absolute;top:0;bottom:0;right:0;}


      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <nav> 
    <ul> 
     <li>one</li> 
     <li>two</li> 
     <li></li> 
    </ul> 
   </nav> 
   <section id="content">
     Curabitur ornare velit quis mauris euismod eget volutpat velit congue. Maecenas vel luctus mauris. In varius arcu sit amet diam accumsan posuere. Proin iaculis tincidunt rutrum. Cras laoreet, neque non luctus interdum, felis magna hendrerit ipsum, sagittis auctor tortor elit auctor leo. In sed mauris quis est auctor vehicula. Aenean mauris justo, iaculis et lobortis quis, ultricies eu orci. Curabitur ornare velit quis mauris euismod eget volutpat velit congue. Maecenas vel luctus mauris. In varius arcu sit amet diam accumsan posuere. Proin iaculis tincidunt rutrum. Cras laoreet, neque non luctus interdum, felis magna hendrerit ipsum, sagittis auctor tortor elit auctor leo. In sed mauris quis est auctor vehicula. Aenean mauris justo, iaculis et lobortis quis, ultricies eu orci. Curabitur ornare velit quis mauris euismod eget volutpat velit congue. Maecenas vel luctus mauris. In varius arcu sit amet diam accumsan posuere. Proin iaculis tincidunt rutrum. Cras laoreet, neque non luctus interdum, felis magna hendrerit ipsum, sagittis auctor tortor elit auctor leo. In sed mauris quis est auctor vehicula. Aenean mauris justo, iaculis et lobortis quis, ultricies eu orci. Curabitur ornare velit quis mauris euismod eget volutpat velit congue. Maecenas vel luctus mauris. In varius arcu sit amet diam accumsan posuere. Proin iaculis tincidunt rutrum. Cras laoreet, neque non luctus interdum, felis magna hendrerit ipsum, sagittis auctor tortor elit auctor leo. In sed mauris quis est auctor vehicula. Aenean mauris justo, iaculis et lobortis quis, ultricies eu orci. Curabitur ornare velit quis mauris euismod eget volutpat velit congue. Maecenas vel luctus mauris. In varius arcu sit amet diam accumsan posuere. Proin iaculis tincidunt rutrum. Cras laoreet, neque non luctus interdum, felis magna hendrerit ipsum, sagittis auctor tortor elit auctor leo. In sed mauris quis est auctor vehicula. Aenean mauris justo, iaculis et lobortis quis, ultricies eu orci. 
   </section> 
   <sidebar>
     Curabitur ornare velit quis mauris euismod eget volutpat velit congue. Maecenas vel luctus mauris. In varius arcu sit amet diam accumsan posuere. Proin iaculis tincidunt rutrum. 
   </sidebar> 
  </div>  
 </body>
</html>

Related Tutorials