草庐IT

height:100%无效

zhao_ran 2023-03-28 原文

我们有时会在CSS里写height: 100%，发现并无效果，如下：

<div class="block"></div>


* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-color: green;
/*   height: 100%; */
  border: 5px solid greenyellow;
}
.block {
  width: 100%;
  height: 100%;
  background-color: red;
}

block类div的高度并未按照我们预想那样撑满全屏高度

block类的父级（包含块）是body，body在未设置值的时，height值为auto，body的实际计算高度为内容撑开的高度，即为0（可以将上述代码的border样式取消注释，可看到body的高度）

那么子元素block类的高度即等同于0

body {
    background-color: azure;
    height: auto;
}
.block {
    width: 100%;
    height: 0 * 100%; // 0
    background-color: red;
}

所以此时block类所在的div盒子的高度无效，height为0，即在浏览器上无渲染高度
浏览器的渲染规则可理解记忆为：深度优先遍历计算
子元素的相对单位的计算值都是基于父/祖先元素对应的属性值，auto是基于内容区域撑开计算所得。
浏览器渲染HTML文档流，背景色默认为白色，如果文档中的html、body标签设置了背景色，这两个标签的背景色实际设置的是浏览器视口的背景色。

height100%codeblock

有关height:100%无效的更多相关文章

  1. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  2. ruby - 如何排除无效日期 ruby - 2

    我想知道我应该引用什么异常名称。我的日期无效。我检查了文档，但找不到。BeginDate.new(day,month,year)Rescueexceptionnamestatements 最佳答案 我认为您正在寻找ArgumentError.使用irb:>Date.new(2,-200,3)ArgumentError:invaliddatefrom(irb):11:in`new'from(irb):11所以beginDate.new(2,-200,3)rescueArgumentError#yourlogicend

  3. ruby - 尝试授权服务器到 ruby​​ 中的服务器类型应用程序以访问 Google 日历时无效授权 - 2

    我正在尝试为自己创建一个直接连接到我的日历的应用程序……但我从不想参与重新验证。我只想编写一次身份验证代码并完成它。授权码如下:key=Google::APIClient::PKCS12.load_key(SERVICE_ACCOUNT_PKCS12_FILE_PATH,PASSWORD)asserter=Google::APIClient::JWTAsserter.new(SERVICE_ACCOUNT_EMAIL,'https://www.googleapis.com/auth/calendar',key)@client=Google::APIClient.new@client.a

  4. ruby - `DateTime.strptime` 返回工作日/时间字符串的无效日期 - 2

    为什么Ruby的strptime不将其转换为DateTime对象:DateTime.strptime('Monday10:20:20','%A%H:%M:%S')#=>ArgumentError:invaliddate虽然这些有效？DateTime.strptime('Wednesday','%A')#=>#DateTime.strptime('10:20:20','%H:%M:%S')#=># 最佳答案 这看起来像一个错误-minitech'scomment是正确的。不过，现在有一个解决方法(因为您可能希望它现在起作用):您可以在

  5. ruby-on-rails - 使用机架中间件捕获无效的 JSON 解析错误 - 2

    我正在使用Rails5，我正在尝试改进对我的API的无效JSON请求的错误处理。我尝试通过救援在Controller中解析来处理无效格式的JSON，但意识到如果用户将ContentType添加到他们的请求header，Rails中间件会在我的JSON请求到达Controller之前解析它。我遵循了以下指南:https://robots.thoughtbot.com/catching-json-parse-errors-with-custom-middleware但是，在启动服务器时出现以下错误:.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems

  6. ruby-on-rails - 带有分类器 gem 的无效编码符号 - 2

    当我将项目添加到我的Postgres数据库时，一切似乎都运行良好。在不做任何更改的情况下，只要在我的应用程序中的任何位置启动Madeleine，我的Rails应用程序就会开始失败:EncodingErrorinEventsController#updateinvalidencodingsymbolapp/controllers/events_controller.rb:137:in`update'137是问题行:135defupdate136@event=Event.find(params[:id])137m=SnapshotMadeleine.new("bayes_data")...

  7. ruby - Unicorn Rails - 在生产模式下启动时占用 100% CPU - 2

    我们正在使用Unicorn_Rails+nginx。它在我的系统(4GBRam，Intel(R)Core(TM)2DuoCPUP8600@2.40GHz)的开发模式和生产模式下运行良好我能够在本地系统中启动10个worker，但在任何情况下都无法在生产中启动超过2个有时它可以工作，但需要等待15-20米启动unicorn_rails时一直占用99.6%的CPU英特尔(R)至强(R)CPUE5507@2.27GHz但它卡在亚马逊(m1.small实例)1.73GB内存我发现没有人在任何地方谈论使用unicorn_rails启动缓慢...... 最佳答案

  8. ruby-on-rails - Rails、Minitest 和 Guard - 为什么 rb-fsevent 占用了超过 100% 的 CPU？ - 2

    我在我的Rails应用程序中运行守卫，测试套件(最小的)最近停止正常工作。如果幸运的话，它会运行所有测试一次，也许两次。在那之后，即使是一个小的测试文件被更改也需要很长时间才能响应，以至于使用gem变得徒劳无功。在测试运行时跟随top，我可以看到有一个ruby​​进程持续占用了超过100%的CPU。即使所有测试都已运行并且我没有对文件进行任何更改。ruby进程是:/Users/Bodacious/.rvm/gems/ruby-2.0.0-p247@MyApp/gems/rb-fsevent-0.9.3/bin/fsevent_watch--latency0.1/Users/Bodaio

  9. ruby-on-rails - wicked_pdf : footer height/styling - 2

    我正在使用很棒的wicked_pdfgem生成PDF，但我不知道如何更改页脚中的某些样式。我有一个用于页脚的HAML模板，大致如下所示:!!!%html%head%meta{:charset=>"utf-8"}=wicked_pdf_stylesheet_link_tag"pdf"%body.footer%pLine1%pLine2%pLine3还有一些样式:.footer{padding-top:1em;border-top:1pxsolid#ccc;}样式应用得很好，但由于页脚高度较小，只有第一行可见。我试过通过CSS设置高度，但到目前为止还没有。如果我使用例如center、att

  10. 【华为OD机试真题 java、python、c++】荒地电站建设【2022 Q4 100分】（100%通过+复盘思路） - 2

    代码请进行一定修改后使用，本代码保证100%通过率，本题目提供了java、python、c++三种代码。复盘思路在文章的最后题目描述祖国西北部有一片大片荒地，其中零星的分布着一些湖泊，保护区，矿区;整体上常年光照良好，但是也有一些地区光照不太好。某电力公司希望在这里建设多个光伏电站，生产清洁能源对每平方公里的土地进行了发电评估，其中不能建设的区域发电量为0kw，可以发电的区域根据光照，地形等给出了每平方公里年发电量x千瓦。我们希望能够找到其中集中的矩形区域建设电站，能够获得良好的收益。输入描述第一行输入为调研的地区长，宽，以及准备建设的电站【长宽相等，为正方形】的边长最低要求的发电量之后每行为

随机推荐