Is there a pure div css way to achieve the satisfaction of the upper and lower divs: the upper div automatically heights according to the content, and the lower div automatically fills the remaining height
I also want to know, waiting for the experts to answer!
The flexible box model in CSS3 can purely use div css to achieve the effect you want. For example:
<!doctype html><html> <head> <title>Temp Web Page</title> <style type="text/css"> body *{border:1px solid} #container{ width:200px; height:400px; display: -moz-box; display:-webkit-flex; display: -ms-flexbox; -moz-box-orient: vertical; -webkit-flex-direction:column; -ms-flex-direction:column; } #inner1{ background:#ddd; } #inner2{ background:#aaa; -moz-box-flex: 1; -webkit-flex:1; -ms-flex:1; } </style> </head> <body> <div id="container"> <div id="inner1"> When you come to the end of a perfect day. It can only mean a tired heart, and the dear friends have to part. </div> <div id="inner2"></div> </div> </body></html> I don’t understand. Which is the remaining height relative to? Are the two divs above and below related to each other as sibling element nodes?
I don’t understand. Which is the remaining height relative to? Are the two divs above and below related to each other as sibling element nodes?
The remaining height is relative to the parent container;
is the sibling node relationship;
Isn’t it enough to directly set the width and height to 100%?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
