标题不触摸屏幕顶部 [英] Header not touching top of screen
本文介绍了标题不触摸屏幕顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的页面上，在屏幕的最顶部有一个标题，并在整个屏幕上延伸。它被渲染为rails partial。每当页面正文中有任何内容时，标题将被拉下，不再触及页面顶部。我似乎不明白是什么导致这种。
I have a header on my page at the very top of the screen and extends across the entire screen. It is rendered as a rails partial. Whenever there is anything in the body of the page, the header gets pulled down and is no longer touching the top of the page. I can't seem to figure out what is causing this. It works fine when there is nothing in the body of the page.
这里是css
html{
padding: 0;
margin: 0;
}
body{
background-color: #Dee0D5;
margin:0;
padding: 0;
}
#navwrap{
width: 800px;
margin: 0 auto;
padding: 0;
}
#nav {
width: 100%;
height:50px;
float: left;
padding: none;
background-color: #859797;
margin: 0 0 10px 0;
box-shadow: 0 0 5px #999999;
ul{
list-style: none;
li{
display:inline;
float:left;
padding: 10px;
font-family: sans-serif;
}
}
}
#wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
height:auto;
}
#footer{
width: 100%;
float: left;
padding: 0;
margin: 0 0 0 1em;
border-top: 1px solid #999999;
li{
display:inline;
list-style-type:none;
float:left;
padding: 10px;
font-family: sans-serif;
}
}
这里是应用程序html： / p>
Here is the application html:
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/header' %>
<div id='wrapper'>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
这里是标题html：
<div id="nav">
<div id='navwrap'>
<ul id='nav-list'>
<li><%= link_to 'Home', root_path %></li>
<li><%= link_to 'About', '#' %></li>
<li><%= link_to 'Projects', '#' %></li>
<li><%= link_to 'Blog', '#' %></li>
</ul>
</div>
</div>
我相信我只是忽视了一些简单的东西，
I'm sure I am just overlooking something simple, but its driving me nuts!
推荐答案
padding：none; 不是
请尝试 padding：0
$ b
try padding:0 instead of it
body{
background-color: #Dee0D5;
margin:0;
padding:0;
}
这篇关于标题不触摸屏幕顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
