草庐IT

CSS div 高度不会扩展

coder 2023-08-05 原文

我有一个侧边栏 DIV，我想垂直扩展它以匹配其包含的 div。

我这样做是为了完成那个

html, body, #wrapper, #content, #sidebar{
    height:100%;
}

但是包装器、内容和边栏永远不会扩展超过 1000 像素，即使内容是它的几倍也是如此。

我相信这是因为 #wrapper 和 #content 的内容完全是 float 的 DIV。

我试图将带有 clear:both 的空 DIV 作为 #wrapper 和 #content 中的最后一个元素，但无济于事.

<body>
<div id="wrapper">
  <div id="footer">
  </div>
  <div id="sidebar">
  </div>
  <div id="content">
   .... 
     <div class="clear"/>
  </div>
  <div class="clear"/>
</div>
</body>

注意:页脚是固定位置

最佳答案

问题是你给html、body和#wrapper设置了100%，这会强制他们的高度是他们 parent 的高度，#wrapper的 parent 是body，body的是html，html的 parent 是什么？我不确定，我猜是浏览器窗口(或其视口(viewport))，如果是这样，那么#wrapper 的高度将始终等于浏览器窗口的高度，所以如果你的浏览器窗口的高度是 1000px，那么 #wrapper 的高度将始终为 1000px，并且因为您将 100% 设置为 #sidebar 和 #content，所以它们的高度也将始终为 1000px，尽管内部元素的高度

如果我是对的，你应该做的是单独设置 html 的高度，将其他人的高度保持为 100%，并将 html 的最小高度设置为 100% 并保留高度。从理论上讲，这将强制 html 至少与浏览器窗口一样高，但当内部元素高于浏览器时会展开，尽管我还没有测试过。

让我知道我是否正确。

编辑:
我测试过，它有效。 只需这样做:

html,
body{
    min-height: 100%;
}

不要设置高度，如果要考虑内部元素的高度，请确保清除 float 且内部元素上没有绝对定位。现在，当没有足够的元素来推送时，body 将占据浏览器窗口的整个视口(viewport)，而当有足够的元素时，body 将扩展到页面的最底部，而不仅仅是浏览器窗口。

在 chrome 中测试过，应该也可以在 firefox 中运行
不知道 ie.
不，实际上，在第二次测试中，它失败了
似乎只有当 parent 有一个给定的高度(例如 height: 500px 或 height: 100%)时， height: 100% 才会起作用；当父元素有 min-height: 100% 而没有高度时，内部元素不能使用 height: 100% 来匹配父元素。

关于CSS div 高度不会扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1966447/

CSSdivcodesectionwrapperhtml

有关CSS div 高度不会扩展的更多相关文章

  1. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  2. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

  3. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  4. c - mkmf 在编译 C 扩展时忽略子文件夹中的文件 - 2

    我想这样组织C源代码:+/||___+ext||||___+native_extension||||___+lib||||||___(Sourcefilesarekeptinhere-maycontainsub-folders)||||___native_extension.c||___native_extension.h||___extconf.rb||___+lib||||___(Rubysourcecode)||___Rakefile我无法使此设置与mkmf一起正常工作。native_extension/lib中的文件(包含在native_extension.c中)将被完全忽略。

  5. ruby-on-rails - 向 Rails 3 添加 Ruby 扩展方法的最佳实践？ - 2

    我有一个要在我的Rails3项目中使用的数组扩展方法。它应该住在哪里？我有一个应用程序/类，我最初把它放在(array_extensions.rb)中，在我的config/application.rb中我加载路径:config.autoload_paths+=%W(#{Rails.root}/应用程序/类)。但是，当我转到railsconsole时，未加载扩展。是否有一个预定义的位置可以放置我的Rails3扩展方法？或者，一种预先定义的方式来添加它们？我知道Rails有自己的数组扩展方法。我应该将我的添加到active_support/core_ext/array/conversion

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 如何在 ruby​​ 中复制目录结构，不包括某些文件扩展名 - 2

    我想编写一个ruby​​脚本来递归复制目录结构，但排除某些文件类型。因此，给定以下目录结构:folder1folder2file1.txtfile2.txtfile3.csfile4.htmlfolder2folder3file4.dll我想复制这个结构，但不包含.txt和.cs文件。因此，生成的目录结构应如下所示:folder1folder2file4.htmlfolder2folder3file4.dll 最佳答案 您可以使用查找模块。这是一个代码片段:require"find"ignored_extensions=[".cs"

  8. ruby - 扩展类和实例 - 2

    这个问题有两个部分。在RubyProgrammingLanguage一书中，有一个使用模块扩展字符串对象和类的示例(第8.1.1节)。第一个问题。为什么如果您使用新方法扩展类，然后创建该类的对象/实例，则无法访问该方法？irb(main):001:0>moduleGreeter;defciao;"Ciao!";end;end=>nilirb(main):002:0>String.extend(Greeter)=>Stringirb(main):003:0>String.ciao=>"Ciao!"irb(main):004:0>x="foobar"=>"foobar"irb(main):

  9. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  10. ruby - 动态扩展现有方法或覆盖 ruby​​ 中的发送方法 - 2

    假设我们有A、B、C类。Adefself.inherited(sub)#metaprogramminggoeshere#takeclassthathasjustinheritedclassA#andforfooclassesinjectprepare_foo()as#firstlineofmethodthenrunrestofthecodeenddefprepare_foo#=>prepare_foo()neededhere#somecodeendendBprepare_foo()neededhere#somecodeendend如您所见，我正在尝试将foo_prepare()调用注入

随机推荐