如果绝对位置是相对于 HTML 而言的，那么为什么改变 HTML 的高度不会影响绝对定位元素的高度？
[英]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?
问题描述
* { 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>
在这个例子中，HTML 的高度是 700px。 如果位置绝对元素是相对于根元素，即 HTML，那么为什么高度 100% 设置为位置绝对元素将元素扩展到整个视口，尽管 html 的高度只有 700 像素？
HTML 元素的高度不是 700px，在这种情况下，我想知道为什么？ 或者它的高度是 700 像素，但绝对定位的元素是视口的 100%，而不是 HTML，在这种情况下，我想知道为什么？
2 个解决方案
解决方案1
4 已采纳 2020-11-18 15:27:57
“如果位置绝对元素相对于根元素，即 HTML ...”
简单的回答，不是。 如果元素没有定位的祖先，那么它的包含块不是 html 元素（尽管你可能在别处读到过，人们一直都弄错了），它的包含块是初始包含块，它有它的顶部，左边画布上 (0, 0) 处的角，高度和宽度等于视口。
解决方案2
1 2020-11-18 16:09:32
根据规范：
根元素所在的包含块是一个称为初始包含块的矩形。 对于连续媒体，它具有视口的尺寸...
如果元素具有 'position: absolute'，则包含块由最近的祖先建立，其 'position' 为 'absolute'、'relative' 或 'fixed'，方式如下：
在祖先是内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。 在 CSS 2.1 中，如果行内元素被分成多行，则包含块是未定义的。
否则，包含块由祖先的填充边缘形成。
您的ul元素没有具有a 'position' of 'absolute', 'relative' or 'fixed'祖先，因此其包含块是initial containing box ，即等于视口的矩形。
我们可以更改初始包含块吗？
不，但我们可以简单地添加一个 div 来包含所有内容。
...
<body>
<div id="my-containing-box" style="position: relative;">
</div>
</body>
...
相对定位元素内的绝对定位元素。 如何获得宽度和高度？
[英]Absolute positioned element inside relative positioned element. How to get width and height?
当相对父代没有高度和宽度时，如何将绝对子代放置在相对父代内部？
[英]How to position absolute children inside relative parent, when relative parent does not have height and width?
如何在绝对定位元素内设置相对定位元素的高度？
[英]How can I set the height of a relative positioned element inside absolute positioned element?
为什么使body标签的样式“position：relative”导致绝对定位的div开始降低？
[英]Why does making the body tag's style “position: relative” cause an absolute-positioned div start lower?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.