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

Centos7.5 configuration java environment installation tomcat explanation

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

Centos7.5 configuration java environment installation tomcat explanation

Building a KVM virtualization platform on CentOS7 (three ways)

CSS 3.0 text hover jump special effects code

Detailed explanation of MySQL file storage

How to get datetime data in mysql, followed by .0

A brief discussion on HTML titles, paragraphs, line breaks, horizontal lines, and special characters

Solution to "Specialized key was too long" in MySQL

Unicode signature BOM detailed description

Methods and steps for deploying go projects based on Docker images

Deeply understand how nginx achieves high performance and scalability

Recommend

Solution to the problem of being unable to access the Internet after Ubuntu restarts in VMWare

How to modify create-react-app's configuration without using eject

CentOS 7 installation and configuration method graphic tutorial

Thinking about grid design of web pages

Thoroughly understand JavaScript prototype and prototype chain

Nginx Layer 4 Load Balancing Configuration Guide

Solution to the paging error problem of MySQL one-to-many association query

Detailed explanation of building MySQL master-slave environment with Docker

Solve the problem that VMware cannot install 64-bit operating system in win10 home version

Detailed analysis of Vue child components and parent components

WeChat applet uses canvas to draw clocks

Linux (center OS7) installs JDK, tomcat, mysql to build a java web project running environment

jQuery simulates picker to achieve sliding selection effect

Solution to mysql ERROR 1045 (28000) problem

Complete steps to install MySQL 8.0.x on Linux