Css layout series-upper and lower columns layout_html/css_WEB-ITnose

Two-column layout. I feel that I use this more when working on information systems. Combined with the previous layout introduction, I will introduce a slightly more complicated real information system layout another day. Please see the rendering:

Key points: Give the top column a fixed height, and let the lower column support itself with high width. If the content of the column overflows, set the overflow attribute to auto. , allowing scroll bars to appear. The lower column must be set to absolute positioning. The distance from its top is equal to the height of the top column and the bottom is equal to 0, and the height will be automatically raised.

*{margin: 0;padding: 0;}html, body{height: 100%;}        .container{height: 100%;}.top{width: 100%;height: 60px;background-color: #241fed;}.middle{width: 100%;top: 60px;background-color: #e30;position: absolute;bottom: 0;overflow: auto;}

  <div class="container">        <div class="top">        </div>        <div class="middle">            上下布局，下面高度自撑。        </div>    </div>