Home > Article > Web Front-end > Ask about a style layout problem_html/css_WEB-ITnose
Ask about a style layout problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:03:18783browse
<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>
How to fill d3 with the remaining space?
Reply to discussion (solution)
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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn