If position absolute is relative to the HTML, then why does changing the height of HTML does not affect the height of the absolute positioned element?

Question

 * { margin:0; padding:0; } html { height: 700px; overflow: hidden; background-color: tan; } body { background-color: rgb(107, 72, 7); height:500px; overflow: hidden; } ul { list-style-type: none; width: 12%; background-color: #f1f1f1; border: 1px solid; position: absolute; height:100%; } ul:hover { cursor:pointer; } li { display: block; padding:10px; border-bottom: 1px solid; } li:hover:not(.home) { background-color: #808080; color: white; } .home { background-color: green; color:white; } .main { margin-left: 13%; padding:10px; }

 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" initial-scale="1.0"> <html lang="en-US"> <link href="css-practice.css" rel="stylesheet"> <title>CSS-practice</title> </head> <body> <ul> <li class="home">Home</li> <li>News</li> <li>Contact</li> <li>About</li> </ul> <div class="main"> <h3>How to cook</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, minus.</p> <h2>Ingredients</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur blanditiis soluta impedit accusantium nostrum doloribus a velit animi quisquam voluptatibus.</p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloremque excepturi harum nam eos aliquid doloribus quam voluptates, perferendis vel, explicabo nisi quo est exercitationem unde quibusdam eveniet accusamus fuga et provident repellendus debitis soluta sequi ipsum. Alias harum nesciunt molestiae hic soluta facere dolorem doloribus est. Quibusdam tenetur aperiam eveniet laboriosam similique autem, expedita necessitatibus magnam molestiae dolores? Veniam nulla ipsam, deleniti ipsa eaque commodi fugit quo eligendi, cum alias, dolores aliquam recusandae! Molestiae nisi necessitatibus reprehenderit ratione sed, odit voluptas suscipit inventore magnam iure tenetur ut autem dolorem beatae qui aspernatur accusamus fugit consequatur et odio quia. Debitis! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi, quos. Laudantium saepe esse sed expedita voluptate minima soluta ea, eveniet reprehenderit omnis maxime ducimus hic nam inventore maiores nostrum enim corrupti facere, impedit eius? Beatae, tenetur, ullam dignissimos vero vel soluta repudiandae accusamus, cum architecto omnis quae asperiores delectus! Ratione ullam porro maxime ducimus tempore tempora, molestias illo, nisi cupiditate, veritatis perferendis. Eveniet quos facere voluptate ex quis possimus ducimus rerum ipsum nisi maxime modi commodi quo fugiat architecto dolor quia cumque ea similique, illum quam? Dicta facilis, laborum similique perspiciatis, voluptatibus natus quibusdam dolor veniam ipsam qui numquam iure, quidem minus vel voluptatum excepturi eos non. Odio, repudiandae voluptatibus aliquid laborum laboriosam maxime vero in amet id nihil. Illo eligendi possimus voluptas aperiam est, molestiae unde reiciendis molestias corporis eum nisi eaque qui in deserunt commodi nihil eos consequuntur quod libero dolorem dignissimos! Voluptates illum id temporibus accusantium quasi impedit, nobis facilis dolorem reiciendis minus aliquam nostrum eos sunt eveniet voluptate dolorum. Id, nostrum exercitationem. Officia sit mollitia voluptatum et quos, harum tenetur rerum hic laboriosam possimus aspernatur ducimus ea ad repudiandae rem officiis cumque architecto vel quidem voluptas neque facilis soluta dolore! Nesciunt dolor perferendis nam nobis quod voluptates alias atque modi ut eveniet animi, quibusdam et sed consectetur eum hic laboriosam voluptatum. Accusantium voluptatem praesentium vero atque eum omnis quisquam? Nihil dignissimos eligendi vitae esse, accusamus illum nemo repudiandae eveniet saepe laudantium? Aut eum vitae ad aliquam, odio veniam nesciunt libero ullam quam asperiores! Facere, reprehenderit optio eum nisi, sed hic iste incidunt tempora quibusdam, tenetur doloribus corrupti enim obcaecati commodi cum rem culpa quo earum mollitia ducimus voluptatibus voluptatum suscipit quos. In vero, quam numquam sed fuga et, velit, deserunt eligendi accusantium pariatur officia commodi consequuntur porro! Exercitationem officiis deserunt temporibus laboriosam sapiente voluptatem voluptas, et velit adipisci tempora iure corrupti aspernatur pariatur labore sed at? Autem repudiandae nostrum tenetur, nesciunt voluptas quisquam asperiores. Deserunt a deleniti officiis accusamus ipsa enim? Accusantium blanditiis delectus perspiciatis, aliquam, maiores fugit praesentium, provident ex quis unde similique natus aut. Eligendi quia velit perspiciatis. Nihil quae aspernatur deserunt dolor magnam accusamus expedita perferendis laborum nobis libero esse excepturi vitae quisquam, sunt quos. Suscipit blanditiis, numquam, reiciendis ratione doloremque a et totam facilis soluta laborum voluptatibus, nulla tenetur porro magnam enim. Ea consectetur repellat odit quod voluptatem voluptas obcaecati, voluptates sequi corporis recusandae illo delectus maxime quidem, iste, dolor quisquam. Iste, reiciendis nobis laborum laboriosam incidunt asperiores, atque nihil omnis aliquid exercitationem ex accusamus iure fuga unde nisi explicabo voluptates. Quod quisquam quaerat dolore obcaecati fugiat assumenda dolorum tempore tempora? Eius totam, vero laudantium dolore, molestiae, accusamus laboriosam esse nihil illo unde consectetur. Deserunt optio explicabo doloremque sapiente pariatur quae animi aliquam quidem. Ut reprehenderit illum et dicta eum deleniti delectus impedit dolor, explicabo exercitationem quae officiis dignissimos, cumque culpa suscipit accusamus. Officiis quidem ipsum maiores, nobis eius nihil unde? Similique officia, fuga sapiente vitae doloremque illo fugit esse ex repellendus exercitationem excepturi necessitatibus officiis minima fugiat, eius labore dicta vero modi magnam eum enim repellat sint. Velit laborum quidem commodi, magnam explicabo unde sed quasi dignissimos temporibus animi sapiente et reiciendis illo quae aut totam id amet magni harum at facilis ab. Veniam molestias illo sequi nulla quis similique necessitatibus architecto at, aliquam dolor pariatur laboriosam quos et odio voluptatibus sapiente aliquid. Ex quia voluptatum quis dolorem, impedit officia ea dolor ipsum veniam sit omnis consectetur expedita hic. Fugiat quae animi sint ea distinctio eveniet ratione earum expedita possimus deserunt obcaecati, neque deleniti corrupti, nesciunt accusamus quaerat, dignissimos suscipit at adipisci tempore commodi consequatur molestias. Dolore nobis officiis ullam vitae sunt voluptatum sed quos cupiditate aut omnis aliquid maxime nostrum explicabo quia accusamus, ad deleniti dignissimos laborum harum et quam pariatur. Repellat aspernatur laborum aperiam eligendi unde saepe, necessitatibus ducimus harum aut molestias, omnis cumque at a ipsa hic, consectetur eum minima soluta vitae in nobis? Perspiciatis earum explicabo in recusandae exercitationem nostrum modi saepe, blanditiis totam perferendis vel, necessitatibus quasi dolorem cumque ducimus est atque accusantium ab temporibus aliquam impedit error! Eligendi numquam architecto vitae dolores? Ullam qui eum, itaque consequuntur, odit aliquid natus sed eaque odio quis iusto quas distinctio earum perferendis dolor quaerat necessitatibus, fugiat reprehenderit impedit. Quo blanditiis beatae eveniet doloremque quidem, magnam obcaecati nobis magni dolore harum voluptates quod ex explicabo perspiciatis amet tenetur. Error, a explicabo cupiditate officia magnam officiis aut voluptas, amet esse, quod iusto? Libero enim cumque ea, alias magnam nostrum sapiente a blanditiis accusantium, perferendis minima laboriosam odio, nesciunt veniam necessitatibus? Aperiam itaque, facilis quasi maiores qui tenetur odit ipsum est explicabo placeat similique amet nisi, a consequatur molestiae quis, iure illo fuga nobis libero blanditiis enim reprehenderit? Dolorum quia reprehenderit perferendis pariatur quidem quam modi adipisci voluptas animi, veritatis corrupti esse quaerat quisquam dicta, sapiente incidunt atque sit, magnam ipsam odio nihil ratione ab nulla rem. Facere voluptates, aperiam doloribus iusto nobis nam quam rerum, animi pariatur ducimus maxime dicta, quis illum molestiae et ab explicabo? Perferendis quas consectetur tempore mollitia explicabo quam nihil! Voluptas, esse nemo reiciendis expedita mollitia cum facilis recusandae incidunt et porro ea corporis molestiae quaerat error reprehenderit eos ad dolorum cupiditate est. Repudiandae ducimus pariatur deleniti cumque eum saepe vero fuga, eligendi qui consequatur sed exercitationem autem, iusto esse labore at. Modi nemo dolore ratione neque vel quos deleniti veniam porro est omnis molestiae error laudantium voluptatibus, molestias quam labore dolorem nam tempore, asperiores vero mollitia quod. Et doloribus voluptates accusantium, rem delectus necessitatibus. Voluptate sapiente tempora error quis mollitia quibusdam corporis a optio est, explicabo illo voluptatem aut laborum ea sunt fugiat sit officia aperiam inventore. Autem accusamus minima architecto nobis! Atque suscipit quae eveniet! Dolorem at odit optio, culpa modi, accusantium reprehenderit obcaecati ipsum quisquam voluptatum aperiam repellendus perferendis in illum velit esse quae enim eum ratione beatae excepturi aut, expedita quaerat. Similique animi quia ipsa saepe rem consequuntur recusandae odio dignissimos vero rerum inventore suscipit optio, quidem excepturi sit, iste cumque incidunt, maiores quibusdam asperiores eos blanditiis atque! Ipsam blanditiis magnam officia! </div> </body> </html>

In this example, the height of HTML is 700px. If the position absolute element is relative to the root element, ie HTML, then why is height 100% set to the position absolute element expands the element to the entire viewport, despite the html being only 700px in height?

Either the HTML element is not 700px in height, in which case, i want to know why? OR it is 700px in height, but the absolutely positioned element is 100% of the viewport, not the HTML, in which case, i want to know why?

Answer 1

"If the position absolute element is relative to the root element, ie HTML ..."

Simple answer, it isn't. If the element has no positioned ancestor, then its containing block is not the html element (despite what you may have read elsewhere, people get this wrong all the time), its containing block is the initial containing block, which has its top, left corner at (0, 0) on the canvas, and height and width equal to the viewport.

Answer 2

According to the spec :

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport...

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.

Otherwise, the containing block is formed by the padding edge of the ancestor.

Your ul element has no ancestor with a 'position' of 'absolute', 'relative' or 'fixed' , so its containing block is the initial containing box , that is a rectangle equal to the viewport.

Can we change the initial containing block?

No, but we can simply add a div to contain everything.

...
<body>
<div id="my-containing-box" style="position: relative;">
</div>
</body>
...

If position absolute is relative to the HTML, then why does changing the height of HTML does not affect the height of the absolute positioned element?

Question

2 answers

solution1
4 ACCPTED 2020-11-18 15:27:57

solution2
1 2020-11-18 16:09:32

If position absolute is relative to the HTML, then why does changing the height of HTML does not affect the height of the absolute positioned element?

Question

2 answers

solution1 4 ACCPTED 2020-11-18 15:27:57

solution2 1 2020-11-18 16:09:32

solution1
4 ACCPTED 2020-11-18 15:27:57

solution2
1 2020-11-18 16:09:32