html - CSS响应高度失败

标签 html css ruby-on-rails responsive-design

简单设置:

parent 是 HTML 和 BODY 他们的 CSS

html body {
padding: 0px;
margin: 0px;
min-height: 100%;
min-width:100%;
background-color:blue;
}

我希望 div 具有响应高度:

#test {
    min-width:100%;
    min-height:100%;
    background-color: yellow;
}

我应该看到黄色(我想我应该),但我只看到蓝色。很抱歉这个非常基本的问题,我从来没有遇到过这个问题,而且我不知道为什么它才开始发生......

如何为#test 设置响应高度?这不应该工作吗?我在 Rails 上使用 ruby​​,这可能是原因吗?

我有标准的 application.html.erb,在我看来唯一的 div 是测试。

当然,它在 rails 中,所以我的观点只是

<div id="test"></div>

application.html.erb 看起来像这样

<!DOCTYPE html>
<html>
<head>
  <title>FooPartners</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= yield %>

</body>
</html>

因此浏览器解释为 html、body、test,然后关闭它们。

更新:我通过将高度更改为

来实现此功能
height: 12(orWhatever%)vh;

这是明智的吗,为什么这是我能让它工作的唯一方法。

最佳答案

原始问题:

enter image description here你有 html body,它应该是 html, body

语法不正确。

你少了一个逗号。

http://jsbin.com/zizuse/1/edit

http://codepen.io/anon/pen/ghCLH

html, body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  background-color:blue;
}


#test {
  width:100%;
  min-height:100%;
  background-color: yellow;
}

关于html - CSS响应高度失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25164410/

相关文章:

ruby-on-rails - Rails 服务器启动时如何自动启动浏览器?

javascript - 使用异步数据对 Canvas 元素进行动画处理

html - 将绝对定位元素与背景对齐

html - 顶部 DIV 大小适合内容 - 底部 DIV 滚动并使剩余空间适合窗口

javascript - Rails - Jammit 使用 ruby​​ 代码渲染 javascript

jquery - Rails 3 JQuery page.insert_html 和 TypeError : Element. insert 不是函数

javascript - 如何将 html 表(由 JavaScript 动态创建)发送到 PHP 页面?

javascript - 如何在文本框中插入值以选择选项

html - outlook 07/10 中的图像不合适

html - CSS Div 离开视口(viewport)并破坏响应式设计