【问题标题】:How to add a full background-color to a div?如何为 div 添加完整的背景颜色?
【发布时间】:2014-04-05 07:13:55
【问题描述】:

我有一个 ruby​​ on rails 应用程序,我想将全宽背景色放入 div,但每次我有不需要的左右和上边距时都没有成功。

这是我的代码:

       <!DOCTYPE html>
<html lang="en">

<!-- header -->
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">



<div class="homepage">
  <div class="container center">
    <div class="texthomepage1">
    <br>
    <font color="white"><p>Découvrez des startups</p></font>
    </div>
        <div class="texthomepage2">
        <p><font color="white">Faites les découvrir à vos amis & obtenez des récompenses.</font></p></font>
        </div>
        <br><br><br>
          <center>
           <!-- REGISTRATION FIELDS -->
           <div class="panel-body">
            <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
              <%= devise_error_messages! %>

            <div class="form-group">
            <%= link_to "Rejoindre Gratuitement", new_user_registration_path, class: "btn btn-lg btn-info" %>
            <% end %>
            <!-- /REGISTRATION FIELDS -->
            <br><br><br>
            </div>
            </div>
            </center>
  </div>
</div>

这是我的 .homepage div 的 CSS:

    .homepage {
    background-color: #e4685d;
    margin: 0 
}

但是使用该代码我仍然有边距,因此背景颜色不会覆盖整个背景。

这样做的正确方法是什么?

【问题讨论】:

    标签: ruby-on-rails ruby html colors background


    【解决方案1】:

    确保你的 body 类没有填充和边距

    body{padding:0;margin:0;}
    .homepage {
    background-color: #e4685d;
    margin: 0;
    }
    

    【讨论】:

    • 非常感谢,我尝试通过添加负边距来修复它,例如:margin-right: -200px;但你的解决方案肯定更干净。
    【解决方案2】:

    试试:

    body{
      margin:0;
    }
    

    此外,您的&lt;meta /&gt;&lt;style&gt;&lt;link&gt; 标签应该在&lt;head&gt; 标签内。请注意,您的 &lt;meta /&gt; 标签在您的 &lt;body&gt; 中。

    【讨论】:

    • 感谢我所做的更改。
    猜你喜欢
    • 2016-08-29
    • 1970-01-01
    • 2019-02-28
    • 1970-01-01
    • 2018-05-04
    • 2012-11-25
    • 1970-01-01
    • 1970-01-01
    • 2013-06-25
    相关资源
    最近更新 更多