Using CSS to solve height-adaptive issues

I am very resistant to using js to solve the highly adaptive problem, because it is difficult to maintain and not natural enough. However, it is not easy to use pure CSS, such as the example I will talk about below.

Requirements:

1. The height of this rectangle is the same as the height of the browser window, and vertical scroll bars cannot appear

2. The height of the green part is fixed, such as 50px

3. Fill the remaining height of the purple part

The HTML structure is as follows:

nav

content

Look first 1.

html, body {

height: 100%;

margin: 0px;

padding: 0px;

}

#main {

background-color: #999;

height: 100%;

}

Requirement 2 is also very Easy:

#nav {

background-color: #85d989;

height: 50px;

}

Requirement 3 Yes The most troublesome thing is that generally we will think of height:100%, but 100% is based on the height of the parent element. For example, the height of the parent element is 300px, #nav takes up 50px, and #content should be 250px, but Written as height: 100%, the result is that the height of #content also becomes 300%, and a vertical scroll bar appears that is not allowed by requirements.

Of course, it is quite simple to use js to solve this kind of problem, but this time I just don’t want to use js, so let’s try it next:

This demand really makes me collapse, look It seemed simple, but after trying n ways, they all felt unreliable. Finally, I found a method that is closest to the ideal effect, as follows

html, body {

height: 100%;

margin: 0px;

padding: 0px;

}

#main {

background-color: #999;

height: 100%;

}

#nav {

background-color: #85d989;

width: 100%;

height: 50px;

float: left;

}

#content {

background-color: #cc85d9;

height:100%;

}

Floating is used here, and the final result just looks fine. Of course, if you just simply display text and pictures, this kind of The method is enough, but if you want to use js to do some interaction, for example, there is an element that needs to be dragged inside #content, its top minimum value must not be 0, otherwise it will be blocked by #nav. The tragedy is me There was such a need, so I continued to try hard.

After a day of trying, and with the guidance of experts, I finally found the solution, and I burst into tears

#nav {

background-color: #85d989;

width: 100%;

height: 50px;

}

#content {

background-color: #cc85d9;

width: 100%;

position: absolute;

top: 50px;

bottom: 0px;

left: 0px;

}

The key point is to use top and bottom together. This is a very unconventional usage. It can forcefully define the area of ​​the box model. It’s amazing.

The above is the detailed content of Using CSS to solve height-adaptive issues. For more information, please follow other related articles on the PHP Chinese website!