Question

我在Rails应用程序中遇到以下问题（但问题是关于css）：在我的CSS中，我有两个div：一个用于主要内容，另一个用于侧面（列菜单）内容。问题是：当我插入副内容时，它会推动主div的内容。我用immages更好地解释。

图片1：

图片2：

我想解决这个问题。所以我想删除空白区域，但我想要所有的菜单。我怎么能这样做？

我的application.html.erb：

我的application.css

<!DOCTYPE html>

<html>

    <head>

      <title>name</title>

      <%= stylesheet_link_tag   "application", :media => "all" %>

        <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

      <%= javascript_include_tag "application" %>

      <%= csrf_meta_tags %>

    </head>



    <body class="<%= controller.controller_name %>">

        <div id="banner">

             <%= @page_title || "name" %>

        </div>



        <div id="columns">

            <div id="side"> 
            <ul class="nav nav-pills nav-stacked">
                <li><a href="#"><i class="fa fa-home fa-fw"></i>Home</a></li>
                <li><%= link_to "Nuovo contatto", companies_new_path ,class: "glyphicon glyphicon-pencil"%></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-file-o fa-fw"></i>Pages</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-bar-chart-o fa-fw"></i>Charts</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-table fa-fw"></i>Table</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-tasks fa-fw"></i>Forms</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-calendar fa-fw"></i>Calender</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-book fa-fw"></i>Library</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-pencil fa-fw"></i>Applications</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-cogs fa-fw"></i>Settings</a></li>
            </ul>
        </div>



         <div id="main">

                <% if notice %>

                <p class="alert alert-success"><%= notice %></p>

                <% end %>

                <% if alert %>

                    <p class="alert alert-danger"><%= alert %></p>

                <% end %>



             <%= yield %>


         </div>





        </div></div> <!-- FINE DIV BODY -->

     </body>

 </html>

Answer 1

使侧边菜单位置固定。所以它不会在主div上重叠。可能这会对你有所帮助

Answer 2

尝试更改此位：

#main {
    margin-left: 17em;
    padding: 2em;
    background: white;
  }

要：

#main {
    overflow: hidden;
    padding: 2em;
    background: white;
  }

overflow: hidden将触发BFC（块格式化上下文），并将阻止浮动div更改主div内容流。

用css删除间距（主要和侧面div）

2 个答案: