标题未触及屏幕顶部答案

【问题标题】：Header not touching top of screen标题未触及屏幕顶部
【发布时间】：2013-04-24 23:39:27
【问题描述】：

我的页面顶部有一个标题，并延伸到整个屏幕。它被渲染为一个 rails 部分。每当页面正文中有任何内容时，标题都会被拉下并且不再接触页面顶部。我似乎无法弄清楚是什么原因造成的。当页面正文中没有任何内容时，它可以正常工作。

这是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：

<!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>

我确定我只是忽略了一些简单的事情，但这让我发疯了！

【问题讨论】：

首先：让你的单位直截了当 - 标准化单位类型 (% / em / px ) 并从那里开始
对不起，在我发布之前应该已经看到了。我对所有东西都使用 px，我改变了一些东西，试图从其他人的建议中修复它。

标签： html css ruby-on-rails

【解决方案1】：

padding: none; 不是 padding 属性的有效值。

尝试padding:0 代替它

body{
    background-color: #Dee0D5;
    margin:0;
    padding:0;
}

【讨论】：

不错，不过没修好=/
看来您使用的是sass 而不是css。你可以试试*{ margin:0;padding:0}。

【解决方案2】：

将 padding-top 设置为 -5px？我相信 5px 是默认边距。

【讨论】：

设置 -5px 不会重置填充。它将设置负填充。为什么不padding-top:0px？
嗯。我知道，默认情况下，我跨越整个页面前 10% 的标题不会出现在每个边缘的最后 5px 上。它对我有用。

【解决方案3】：

如果我没记错的话，我认为您的 <ul> 元素可能具有默认边距和/或填充 - 尝试使其具有边距：0；此外，您的 <li> CSS 规则似乎嵌套在 <ul> 样式规则内。

【讨论】：

我使用的是 SASS，所以嵌套的 li 不是问题。这两个都嵌套在 #nav 类中。 ul 上的 margin-0 没有解决问题。
你试过了吗<ul>margin: 0; ?