草庐IT

html - css 填充剩余高度，仅当 child 需要时

coder 2023-08-11 原文

我有一个内容面板和一个页脚面板。页脚具有固定大小，但内容可以固定或填充剩余高度，具体取决于(大)子元素。如果任何 child 填充剩余高度，则内容面板也应填充剩余高度。 这种填充 child 的深度可以是任何(直接 child 或 10 个嵌套级别)

例子: 

var button = document.getElementById('child-switcher');
var child = document.getElementById('content-filler');
button.onclick = function() {
	if (child.style.display === 'none') {
  	child.style.display = null;
  } else {
  	child.style.display = 'none';
  }
}
#main {
  height: 300px;
  display: flex;
  flex-direction: column;
}

#footer {
  background-color: green;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#some-nested-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#content-filler {
  flex: 1;
  background-color: red;
}

#content-header,
#content-footer {
  background-color: yellow;
}
<div id="main">
<button id="child-switcher">
  Hide/show the child
</button>
<div id="content">
  <div id="some-nested-content">
    <div id="content-header">
      CONTENT_HEADER
    </div>
    <div id="content-filler">
      FILLING REMAINING HEIGHT
    </div>
    <div id="content-footer">
      CONTENT_FOOTER
    </div>
  </div>
</div>
<div id="footer">FOOTER</div>
</div>

在示例中，如果您按下一个按钮，FOOTER 将停留在底部，但它应该上升。

PS使用flexbox不是必须的，它可以是任何布局，这样可以达到预期的效果。

最佳答案

In the example, if you press a button, FOOTER stays at the bottom, but it should go up.

当您移除(设置为display: none;) flex 元素content-filler时，content仍会填充剩余空间及其 flex: 1，并将 footer 保持在底部。

If any child fills remaining height, then the content panel should also fill remaining height.

解决该问题的一种方法是简单地在 content 上切换一个类，即切换其 flex-grow 值。

The depth of such filling childs can be any (immediate childs or 10 nested levels)

在这里，我还使用了相同的类来控制 content-filler 元素，因为用类来控制比直接更改元素的样式要好，而且您可以轻松地定位任何数字或元素的层次。

堆栈片段

var button = document.getElementById('child-switcher');
var parent = document.getElementById('content');
button.onclick = function() {
  parent.classList.toggle('collapse');
}
#main {
  height: 300px;
  display: flex;
  flex-direction: column;
}

#footer {
  background-color: green;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#content.collapse {
  flex: 0 1 auto;                           /*  added  */
}
#content.collapse #content-filler {
  display: none;                            /*  added  */
}

#some-nested-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#content-filler {
  flex: 1;
  background-color: red;
}

#content-header,
#content-footer {
  background-color: yellow;
}
<div id="main">
  <button id="child-switcher">
  Hide/show the child
  </button>
  <div id="content">
    <div id="some-nested-content">
      <div id="content-header">
        CONTENT_HEADER
      </div>
      <div id="content-filler">
        FILLING REMAINING HEIGHT
      </div>
      <div id="content-footer">
        CONTENT_FOOTER
      </div>
    </div>
  </div>
  <div id="footer">FOOTER</div>
</div>

选项 2 是更改标记，将 footer 移到 some-nested-content 元素中

堆栈片段

var button = document.getElementById('child-switcher');
var child = document.getElementById('content-filler');
button.onclick = function() {
  if (child.style.display === 'none') {
    child.style.display = null;
  } else {
    child.style.display = 'none';
  }
}
#main {
  height: 300px;
  display: flex;
  flex-direction: column;
}

#footer {
  background-color: green;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#some-nested-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#content-filler {
  flex: 1;
  background-color: red;
}

#content-header,
#content-footer {
  background-color: yellow;
}
<div id="main">
  <button id="child-switcher">
  Hide/show the child
  </button>
  <div id="content">
    <div id="some-nested-content">
      <div id="content-header">
        CONTENT_HEADER
      </div>
      <div id="content-filler">
        FILLING REMAINING HEIGHT
      </div>
      <div id="content-footer">
        CONTENT_FOOTER
      </div>

      <div id="footer">FOOTER</div>
    </div>
  </div>
</div>

关于html - css 填充剩余高度，仅当 child 需要时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47970387/

childhtmlcontentcodedivcssflexbox

有关html - css 填充剩余高度，仅当 child 需要时的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  4. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  5. ruby - rspec 需要 .rspec 文件中的 spec_helper - 2

    我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只

  6. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  7. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  8. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  9. ruby - 匹配大写字母并用后续字母填充，直到一定的字符串长度 - 2

    我有一个驼峰式字符串，例如:JustAString。我想按照以下规则形成长度为4的字符串:抓取所有大写字母；如果超过4个大写字母，只保留前4个；如果少于4个大写字母，则将最后大写字母后的字母大写并添加字母，直到长度变为4。以下是可能发生的3种情况:ThisIsMyString将产生TIMS(大写字母)；ThisIsOneVeryLongString将产生TIOV(前4个大写字母)；MyString将生成MSTR(大写字母+tr大写)。我设法用这个片段解决了前两种情况:str.scan(/[A-Z]/).first(4).join但是，我不太确定如何最好地修改上面的代码片段以处理最后一种

  10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

随机推荐