草庐IT

html - CSS:是否有可能获得 100% 高度的 div，减去顶部和底部边距？

coder 2023-08-09 原文

我可以获得 100% 高度的 div，如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>T5</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
    </link>

    <style type="text/css">
      * { padding: 0; margin: 0; }
      html, body { height: 100%; }
      body {
         font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
         font-size: 75%;
      }
      h1 { font-weight: bold; font-size: 1.4em; padding: 10px 10px 0;}
      p { padding: 0 10px 1em; }
      #container {
         min-height: 100%;
         background-color: #DDD;
         border-left: 2px solid #666;
         border-right: 2px solid #666;
         width: 280px;
         margin: 0 auto;
      }
      * html #container { height: 100%; }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>100% Height Div</h1>
      <p>Lorem ipsum ...</p>
    </div>
  </body>
</html>

看起来像这样:

当我说“100% 高度”时 - 我的意思是无论 div 中有多少内容，也不管窗口如何调整大小，它都保持全高。

但是有没有可能得到一个高度为“几乎100%”高度的div呢？如果我想要顶部和底部的边距，我可以这样做吗？

我希望它看起来像这样:

我可以用 Javascript+CSS 做到这一点。我可以只用 CSS 来做吗？

答案:
是的，绝对定位是可能的。 

  #container {
     width: 380px;
     background-color: #DDD;
     border: 2px solid #666;
     position: absolute;
     top: 20px;    /* margin from top */
     bottom: 20px; /* margin from bottom */
     left: 50%;    /* start left side in middle of window */
     margin-left: -190px; /* then, reverse indent */
     overflow: auto; /* scrollbar as necessary */
  }

结果:

谢谢 to keithjgrant for the answer .在 http://jsbin.com/otobi 查看所有代码.

最佳答案

尝试绝对定位:

#container {
    position: absolute;
    top: 20px;
    bottom: 20px;
}

它在 IE6 中可能很古怪(什么不是？)，但是如果您四处搜索，可以尝试很多技巧。其中包括添加 clear: both 规则或将绝对定位的 div 包装在另一个 div 中。

overflow: auto 应该使滚动条的行为与您想象的一样。

编辑:或者，您可以向包装器 div 添加 20 像素的填充，然后将您的容器设置为 height: 100%，没有边距，它应该填满其包装器的填充。

关于html - CSS:是否有可能获得 100% 高度的 div，减去顶部和底部边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2496260/

html100%34codesectioncss

有关html - CSS:是否有可能获得 100% 高度的 div，减去顶部和底部边距？的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

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

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

  3. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  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 - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  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-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并在看到包时选择

  8. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

  9. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  10. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/

随机推荐