html - How can I force a nested div to fit exactly in the parent? -
i'm trying build webpage layout have few paragraphs followed list underneath.
i want page height of viewport, , .lower scroll if .lower tall fit on screen.
body { overflow: hidden; } .lower { max-height: 100vh; overflow-y: scroll; } however, css, .lower tall , last few items aren't visible. think want height of .lower (in pseudocode) 100vh - height(.upper).
can achieve layout using css?
body { overflow: hidden; } .lower { max-height: 100vh; border: 1px dotted red; overflow-y: scroll; }<!doctype html> <html> <head> <title></title> </head> <body> <div class="upper"> <p>hello world </p> <p>hello world again </p> </div> <div class="lower"> <ul> <li>hello world 1</li> <li>hello world 2</li> <li>hello world 3</li> <li>hello world 4</li> <li>hello world 5</li> <li>hello world 6</li> <li>hello world 7</li> <li>hello world 8</li> <li>hello world 9</li> <li>hello world 10</li> <li>hello world 11</li> <li>hello world 12</li> <li>hello world 13</li> <li>hello world 14</li> <li>hello world 15</li> <li>hello world 16</li> <li>hello world 17</li> <li>hello world 18</li> <li>hello world 19</li> <li>hello world 20</li> <li>hello world 21</li> <li>hello world 22</li> <li>hello world 23</li> <li>hello world 24</li> <li>hello world 25</li> <li>hello world 26</li> <li>hello world 27</li> <li>hello world 28</li> <li>hello world 29</li> <li>hello world 30</li> </ul> </div> </body> </html>
if using fixed (known) height upper element acceptable use calc() :
body { height: 100vh; margin: 0; overflow: hidden; } .upper p { line-height: 20px; margin: 20px 0; } .lower { height: calc(100% - 100px); border: 1px dotted red; overflow-y: scroll; box-sizing: border-box; } i've avoided using vh .lower directly because of issues when being used inside css calc().
Comments
Post a Comment