CSS highly adaptive

CSS Height Adaptation

CSS Height Adaptation

In web development, sometimes we need to make the container height adapt to the size of the content, rather than fixing it to a fixed height. This makes the web page more beautiful and flexible when displayed on different devices. In this article, we’ll discuss some common methods for achieving height-adaptive effects with CSS.

Method 1: Using the display property

By setting the display property of a container to flex, you can achieve height-adaptive effects. Flex layouts offer excellent responsiveness and flexibility.


The sample code is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
display: flex; 
flex-direction: column; 
} 

.header { background-color: lightblue; 
height: 50px; 
} 

.content { 
background-color: lightcoral; 
flex: 1; 
} 

.footer { 
background-color: lightgoldenrodyellow; 
height: 50px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="header">Header</div> 
<div class="content">Content</div> 
<div class="footer">Footer</div> 
</div> 
</body> 
</html> 

In the example above, we create a container and set it to flex layout. By setting the flex property of .content to 1, it takes up the remaining space, thus achieving adaptive height.

Method 2: Using the position attribute

Another method is to use the position attribute. By setting the container’s position attribute to relative or absolute and combining it with height: 100%, you can achieve a height-adaptive effect.

Sample code is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
position: relative; 
height: 100px; /* Set a fixed height */ 
} 

.content { 
background-color: lightblue; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="content">Content</div> 
</div>

</body>

</html>

In the above example, we create a container with a fixed height, set the content’s position to absolute, and achieve adaptive height by setting the top, bottom, left, and right values ​​to 0.

Method 3: Using the calc function

Another method is to use the CSS calc function. This function uses the “+,” “-,” “*,” and “/” operators in mathematical expressions to calculate length values. By combining the calc function with percentages, you can achieve adaptive height.

The sample code is as follows:

<!DOCTYPE html> 
<html> 
<head> <style>
.container {
height: 200px; /* Set a fixed height */
}

.content {
background-color: lightcoral;
height: calc(100% - 50px); /* Subtract the fixed height */
}

.footer {
background-color: lightgoldenrodyellow;
height: 50px;
}
</style>

</head>

<body>

<div class="container">

<div class="content">Content</div>

<div class="footer">Footer</div>

</div>

</body>

</html>

In the example above, we set a fixed height container and use the calc function to calculate the height of .content so that it adapts to the height of the container.

Method 4: Using JavaScript

The final method uses JavaScript to achieve height adaptation. By listening for window resize events or content change events, the container’s height can be dynamically adjusted.

The sample code is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
height: auto; 
overflow: hidden; 
} 

.content { 
background-color: lightblue; 
height: auto; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="content">Content</div> 
</div> 

<script> 
window.onload = function() { 
var container = document.querySelector('.container'); 
var content = document.querySelector('.content'); 

container.style.height = content.offsetHeight + 'px'; 
} window.onresize = function() {
var container = document.querySelector('.container');
var content = document.querySelector('.content');

container.style.height = content.offsetHeight + 'px';
}
</script>

</body>

</html>

In the above example, we use JavaScript to listen for window resize events and adjust the container’s height in real time to achieve a highly adaptive effect.

In summary, this article introduced several common methods for achieving highly adaptive CSS effects, including using the display property, the position property, the calc function, and JavaScript. Choosing the appropriate method to achieve highly adaptive effects based on specific needs and scenarios can make web pages more beautiful and flexible when displayed on different devices.

Leave a Reply

Your email address will not be published. Required fields are marked *