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 perfectly implement the grid layout with intervals on the page
Typical layout examples As shown in the above pic...
Detailed explanation of Angular routing basics
Table of contents 1. Routing related objects 2. L...
Introduction to Enterprise Production MySQL Optimization
Compared with other large databases such as Oracl...
Summary of the difference between using from and join to query two tables in MySQL
Preface In MySQL, multi-table join query is a ver...
The magic of tbody tag speeds up the display of table content
You must have saved other people’s web pages and l...
Steps to restore code from a Docker container image
Sometimes the code is lost and you need to recove...
How to build svn server in linux
1: Install SVN yum install -y subversion 2. Creat...
Configure VIM as a C++ development editor in Ubuntu
1. Copy the configuration file to the user enviro...
How to solve the problem of margin overlap
1. First, you need to know what will trigger the v...
Example of using JSX to build component Parser development
Table of contents JSX environment construction Se...
Detailed explanation of several ways to write private variables of ES6 implementation class
Closure implementation of private variables Priva...
MySQL Error 1290 (HY000) Solution
I struggled with a problem for a long time and re...
Front-end performance optimization - the pain points that front-end engineers have to talk about
Preface <br />In the previous article "...
Solutions to problems using addRoutes in Vue projects
Table of contents Preface 1. 404 Page 1. Causes 2...
Summary of 7 reasons why Docker is not suitable for deploying databases
Docker has been very popular in the past two year...