Home > Article > Web Front-end > How to implement: The upper div automatically heightens according to the content, and the lower div automatically fills the remaining height_html/css_WEB-ITnose
How to implement: The upper div automatically heightens according to the content, and the lower div automatically fills the remaining height_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:21:581879browse
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
Reply to the discussion (solution)
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> Currently supported browsers include IE10 and newer versions of FireFox, Chrome, etc.
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%?