CSS sets the box container (div) height to always be 100%

Preface

Sometimes you need to keep the height of a box container at 100% at all times, no matter how you zoom the browser. Just like the sidebar on some websites, but directly setting the height of the box container to 100% does not work.

demo

If you want an element's percentage height: 100%; to work, you need to set a valid value for the height of all of its parent elements. Take the demo below for example. The parent elements of div are body and html. So just set both the parent element and the element itself to 100% height.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
I want the <div> to have 100% height so I can scale it as I like. </div>
</body>
</html>

CSS:

html,body,div{
   height:100%;
}
/* Simply add some styles to the div */
div{
   background:red;
   width:200px;
}

Effect:

This is the end of this article about how to set the box container (div) height to always be 100% with CSS. For more information about how to set the div height to always be 100%, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: MySQL foreign key constraint (FOREIGN KEY) case explanation

>>: jQuery implements all shopping cart functions

Vue/react single page application back without refresh solution

CSS sets the box container (div) height to always be 100%

Vue/react single page application back without refresh solution

Unbind SSH key pairs from one or more Linux instances

Detailed explanation of the use of Vue card-style click-to-switch image component

Alibaba Cloud ESC Server Docker Deployment of Single Node Mysql

How to handle spaces in CSS

Nginx reverse proxy springboot jar package process analysis

nginx+tomcat example of accessing the project through the domain name

XHTML Getting Started Tutorial: Commonly Used XHTML Tags

Example code for implementing the secondary linkage effect of the drop-down box in Vue

Build a WebRTC video chat in 5 minutes

Recommend

Detailed explanation of Vue px to rem configuration

jQuery plugin to implement accordion secondary menu

Ubuntu starts the SSH service remote login operation

Detailed usage of MYSQL row_number() and over() functions

How to set font color in HTML and how to get accurate font color in HTML using PS

7 major elements of web page redesign Share the 7 major elements of web page redesign

How to view the database installation path in MySQL

How to update v-for in Vue

Three ways to configure Nginx virtual hosts (based on domain names)

Reasons and solutions for slow MySQL query stuck in sending data

Setting up shadowsocks+polipo global proxy in Linux environment

How to find out uncommitted transaction information in MySQL

MySQL reports an error: Can't find file: './mysql/plugin.frm' solution

How to Change Colors and Themes in Vim on Linux

Detailed explanation of Linux zabbix agent deployment and configuration methods