CSS layout series-upper and lower columns application scenarios_html/css

CSS layout series-upper and lower columns application scenarios_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:48:54

Original

1290 people have browsed it

Today I will talk about the application scenario of upper and lower column layout. Before that, I will briefly mention the box-sizing attribute. This attribute has three values: content-box|border-box|inherit.

The box-sizing attribute allows you to define specific elements that match a certain area in a specific way.

Usually the height and width we set actually refer to the height and width of the content, and the height and width of the border are not included. If you set box-sizing: content-box only includes the height and width of the box content, and the height and width of the border are not included, the default is this algorithm (Figure 1). If you want to include the border within the height and width we set, just set box-sizing: border-box (Figure 2), so you will see that the height and width of the content become 180*180, and the calculation formula is:

Content width = width - (border width * 2 padding * 2); content height = height - (border height * 2 padding * 2);

(Picture 1)

(Picture 2)

This attribute is mentioned here. If you want to know more about it, you can search it yourself. Everyone is welcome to discuss it together. There are actually many application scenarios for upper and lower columns. The layout of upper and lower columns in the comprehensive application of the previous layout series is an example. There is actually one panel. I use this most in my daily work, and there are panels everywhere. There are also extjs and ligerui panel components that actually look like this. Please see the renderings:

Now analyze the panel layout and implementation principles:

Panels are usually divided into two parts: title bar and content bar.

Fix the height of the title bar, and let the content column stretch with the height of the content, which is the outer support;

The inner support is the height reduction of the outermost container of the panel. The height of the title bar is equal to the height of the content bar. If there is too much content, a scroll bar will appear in the content bar.

As for when to use external supports and when to use internal supports, it depends on the specific analysis of specific needs.

Outer support rendering:

Code:

<style type="text/css">*{margin: 0;padding: 0;} body{font-size: 14px;}.container{position: relative;border: solid 1px red;width: 400px;box-sizing: border-box;margin-left: 20px;margin-top: 20px;text-align:justify;text-justify:inter-word;}.header{height: 30px;line-height: 30px;background-color: rgb(218,255,241);}.content{background-color: #ccc;}</style></head><body>    <div class="container">        <div class="header"> 外撑面板</div>        <div class="content">            我是内容栏我是内容栏        </div>    </div></body></html>

Copy after login

Inner support rendering:

Code:

<style type="text/css">*{margin: 0;padding: 0;}body{font-size: 14px;}.container{position: relative;border: solid 1px red;width: 400px;height:400px;box-sizing: border-box;margin-left: 20px;margin-top: 20px;text-align:justify;text-justify:inter-word;}.header{height: 30px;line-height: 30px;background-color: rgb(218,255,241);}.content{background-color: #ccc;position:absolute;top:30px;left:0;right:0;bottom:0;}</style></head><body>    <div class="container">        <div class="header"> 内撑面板</div>        <div class="content">            我是内容栏我是内容栏        </div>    </div></body></html>

Copy after login