CSS Responsive Height Fail
Question
Simple Set Up:
Parents are HTML and BODY their CSS
html body {
padding: 0px;
margin: 0px;
min-height: 100%;
min-width:100%;
background-color:blue;
}
I want a div to have a responsive height:
#test {
min-width:100%;
min-height:100%;
background-color: yellow;
}
I should see yellow (I thought I should), but I only see blue. Sorry for the extremely basic question, I've never had this problem, and I don't know why it just started happening...
How can I have a responsive height for #test? Shouldn't this be working? I am using ruby on rails, could this be why?
I have the standard application.html.erb and the only div I have on my view is the test.
Sure, it's in rails so my view is just
<div id="test"></div>
The application.html.erb explicitly looks like this
<!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>
So the browser interprets as html,body, test, and then closes them.
Update: I got this working by changing the height to
height: 12(orWhatever%)vh;
is this advisable, how come this is the only way I can get this working.
1 answers
solution1
1 ACCPTED 2014-08-06 16:34:32
ORIGINAL Question:
You have
html body and it should be html, body
The syntax is incorrect.
You are missing a comma.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.