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
Tutorial on using prepare, execute and deallocate statements in MySQL
Preface MySQL officially refers to prepare, execu...
How to build Apr module for tomcat performance optimization
Preface Tomcat is a widely used Java web containe...
css add scroll to div and hide the scroll bar
CSS adds scrolling to div and hides the scroll ba...
How to backup MySQL regularly and upload it to Qiniu
In most application scenarios, we need to back up...
Detailed explanation of Django+Vue+Docker to build an interface testing platform
1. Two words at the beginning Hello everyone, my ...
Install and use Git and GitHub on Ubuntu Linux
Introduction to Git Git is an open source version...
Several ways to center a box in Web development
1. Record several methods of centering the box: 1...
Summary of all HTML interview questions
1. The role of doctype, the difference between st...
How to use linux commands to convert and splice audio formats
Install FFmpeg flac eric@ray:~$ sudo apt install ...
Detailed explanation of data types in JavaScript basics
Table of contents 1. Data Type 1.1 Why do we need...
Three ways to configure JNDI data source in Tomcat
In my past work, the development server was gener...
Detailed tutorial on how to install OpenStack Ussuri in CentOS8 with minimal deployment
The tutorial for installing OpenStack Ussuri with...
Detailed explanation of jquery tag selector application example
This article example shares the specific code of ...
Talk about nextTick in Vue
When the data changes, the DOM view is not update...
Detailed explanation of JavaScript closure issues
Closures are one of the traditional features of p...