1
我在Rails應用程序中遇到以下問題（但問題在於css）： 在我的css中，我有兩個div：一個用於主內容，另一個用於主內容爲方（列菜單）內容。 問題是：當我插入側面內容時，它將底部主div的內容推到底部。我更好地解釋了immages。用css（主要和側面div）去除間距
圖片1：
圖片2：
我想解決這個事情。所以我想刪除空格，但我想擁有所有的菜單愛好者。我怎樣才能做到這一點？
我application.html.erb：爲固定
<!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>
我application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require fullcalendar
*= require_self
*= require jquery.ui.all
*= require_tree .
*/
#banner {
background: #282827;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 20px/20px "Times New Roman", serif;
color: #141414;
text-align: left;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #646462;
#main {
margin-left: 17em;
padding: 2em;
background: white;
}
#side {
color: red;
float: left;
padding: 1em 2em;
width: 13em;
background: #646462;
ul {
padding: 0;
li {
list-style: none;
a {
color: #bfb;
font-size: small;
}
}
}
}
}
你能分享演示鏈接嗎？ –
我不能讓我在我的應用程序中安裝日曆寶石。所以，即使我將導出HTML + CSS，你無法看到日曆 – Vito
你需要，當你在菜單（右側）插入內容mainDiv（左側）是相同的高度？ 您可以使用display：table-cell; –