<div id="d1"> <input type="text" value="hello" /> </div> <div id="d2" style="height:200px;background-color:blue;"></div> <div id="d3" style="height:100%;background-color:red"></div>
Width and height They all use percentages
xuejun405, look at the style of d3. I used 100%
and add one: html, body{height:100%;}
added No
<div id="d1"> <input type="text" value="hello" /> </div> <div id="d2" style="height:200px;background-color:blue;"></div> <div id="d3" style="height:100%;background-color:red"></div>
js corrected version, you can also reset the d3 size after changing the window size
<body style="height:100px;margin:0px"> <div id="d1"> <input type="text" value="hello" /> </div> <div id="d2" style="height:200px;background-color:blue;"></div> <div id="d3" style="background-color:red"></div> </body><script> function resetD3() { var css1 = document.compatMode == 'CSS1Compat'; var h = document[css1 ? 'documentElement' : 'body'].clientHeight; var d1 = document.getElementById('d1'), d2 = document.getElementById('d2'), d3 = document.getElementById('d3') d3.style.height = h - d1.offsetHeight - d2.offsetHeight + 'px'; } window.onload = window.onresize = resetD3;</script>
Check port occupancy in linux
What are the commonly used commands in postgresql?
Common Linux download and installation tools
How to run code html in vscode
There is an extra blank page in Word and I cannot delete it.
What do e-commerce platforms include?
proxy switchysharp
Why webstorm cannot run the file
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
