How to make the height of child div fill the remaining space of parent container in CSS
1. Use floating methodEffect picture:
The code is as follows: (Note that the height of .content is 500px, which is the height of the parent element, but the floating element is above .content and covers .content. Change the .nav background style to background-color: rgba(0,0,0,0.1); to observe the effect)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Height fills the parent container</title>
</head>
<style>
.parent {
height: 500px;
width: 300px;
border: 1px solid red;/***/
padding: 2px 2px;/***/
}
.nav {
height: 100px;
width: 100%;/*Required, full width to prevent floating*/
float: left;/*Required*/
background-color: red;
}
.content {
height:100%;/*Required*/
background-color: green;
}
</style>
<body>
<div class="parent">
<div class="nav">
Fixed height </div>
<div class="content">
Adaptive parent container, fill the remaining space </div>
</div>
</body>
</html>2. Use positioningThe code is as follows: (This method is recommended because it does not have the disadvantages of the above method)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Height fills the parent container</title>
</head>
<style>
.parent {
position: relative;
height: 500px;
width: 300px;
border: 1px solid red;/***/
padding: 2px 2px;/***/
}
.nav {
height: 100px;
width: 100%;
background-color: red;
}
.content {
position:absolute;
top: 100px;
bottom: 0px;
background-color: green;
width: 100%;
}
</style>
<body>
<div class="parent">
<div class="nav">
Fixed height </div>
<div class="content">
Adaptive parent container, fill the remaining space </div>
</div>
</body>
</html>This concludes this article on how to use CSS to make the height of a child div fill the remaining space of its parent container. For more information on how to use CSS to make the height of a child div fill the remaining space, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. We hope that you will support 123WORDPRESS.COM in the future! |
<<: JavaScript implements three common web effects (offset, client, scroll series)
>>: HTML page common style (recommended)
Recommend
How to configure the same domain name for the front and back ends of nginx
This article mainly introduces the method of conf...
React implements multi-component value transfer function through conetxt
The effect of this function is similar to vue的pro...
Linux checkup, understand your Linux status (network IO, disk, CPU, memory)
Table of contents 1. Core commands 2. Common comm...
Unicode signature BOM detailed description
Unicode Signature BOM - What is the BOM? BOM is th...
How to deploy multiple Vue projects under the same domain name using nginx and use reverse proxy
Effect There are currently 2 projects (project1, ...
Win2008 R2 mysql 5.5 zip format mysql installation and configuration
Win2008 R2 zip format mysql installation and conf...
The difference between br and br/ in HTML
answer from stackflow: Simply <br> is suffic...
Example code for text origami effect using CSS3
Preface This article mainly shares with you an ex...
Detailed explanation of Docker container data volumes
What is Let’s first look at the concept of Docker...
Windows Server 2016 Remote Desktop Services Configuration and License Activation (2 Users)
The default number of remote desktop connections ...
Analysis of different MySQL table sorting rules error
The following error is reported when MySQL joins ...
Detailed explanation of MySQL combined index and leftmost matching principle
Preface I have seen many articles about the leftm...
How many common loops do you know about array traversal in JS?
Preface As a basic data structure, arrays and obj...
Detailed explanation of the error problem when setting the default value of 0000-00-00 in the date and datetime types of Mysql database
Phenomenon: After MySQL version 5.7, the default ...
mysql: [ERROR] unknown option '--skip-grant-tables'
MySQL database reports ERROR 1045 (28000): Access...