Javascript 无论发生什么,我的边栏都是固定的。如何使用侧边栏实现滚动?
我的侧边栏有点动态:我发布的文章越多,它就越大。然而,侧边栏也是固定的,这使得它有时不可能看到它的底部(当我缩小浏览器窗口或有很多文章时)。 如何使侧边栏滚动成为可能? 这是我的CSS文件,侧边栏主要由div表示,class=“container2” 我的侧栏是,这里是我的app/views/layouts/application.html.erb,我的侧栏由divs中的内容表示:Javascript 无论发生什么,我的边栏都是固定的。如何使用侧边栏实现滚动?,javascript,css,ruby-on-rails,scroll,styling,Javascript,Css,Ruby On Rails,Scroll,Styling,我的侧边栏有点动态:我发布的文章越多,它就越大。然而,侧边栏也是固定的,这使得它有时不可能看到它的底部(当我缩小浏览器窗口或有很多文章时)。 如何使侧边栏滚动成为可能? 这是我的CSS文件,侧边栏主要由div表示,class=“container2” 我的侧栏是,这里是我的app/views/layouts/application.html.erb,我的侧栏由divs中的内容表示: <div class="col-md-2" id ="sidebar"> <div class=
<div class="col-md-2" id ="sidebar">
<div class="container2">
最后:app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<div class="row">
<div class="col-md-9">
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
</div>
<div class="col-md-2" id ="sidebar">
<div class="container2">
<br>
<%= form_tag articles_path, :method => :get do %>
<p>
<%= text_field_tag :search, params[:search] %>
<%= submit_tag "Search", :name => nil, class: "btn btn-primary" %>
</p>
<% end %>
<!-- <form>
<span><input type="text" class="search rounded" placeholder="Search..."></span>
</form>
-->
<hr>
<h3> Archives </h3>
<% if @posts.to_a.empty? %>
<div class="post">
<p>No articles found...</p>
</div>
<% else %>
<% current_month = 0 %>
<% current_year = 0 %>
<% for article in @posts %>
<% if (article.created_at.year != current_year)
current_year = article.created_at.year %>
<h3 class="archiveyear"><%= article.created_at.year%></h3>
<% end %>
<% if (article.created_at.month != current_month || article.created_at.year != current_year)
current_month = article.created_at.month
current_year = article.created_at.year %>
<h4 class="archivemonth"><%= (Date::MONTHNAMES[article.created_at.month]) %></h4>
<% end %>
<div class="archivepost">
<%= link_to article.title, article_path(article) %> posted on <%= article.created_at.strftime('%A')%> - <%= article.created_at.strftime('%d') + "th"%>
</div>
<% end -%>
<%end %>
<hr>
<h3>Subscribe</h3>
<%= form_for(@subscriber) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :name %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.label :email %>
<%= f.text_field :email, class: 'form-control' %>
<%= f.submit "Let me subscribe", class: "btn btn-primary" %>
<% end %>
<br>
<hr>
</div>
</sidebar>
</p>
</div>
</div>
<h6>
<% if logged_in? %>
<%= "Logged in as #{current_user.email}" %>
<%= link_to "Log out", logout_path %>
<% else %>
<%= link_to "Log in", login_path %> if you are one of our bloggers
<% end %>
</h6>
</div>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</body>
正确%>
正确%>
:get-do%>
无,类别:“btn btn主”%>
档案室
没有找到文章
张贴于-
订阅
如果你是我们的博主之一
如何使侧边栏滚动成为可能,以便我可以看到其所有内容?您必须在侧边栏上设置一个高度,然后告诉溢出的内容滚动。像这样的方法应该会奏效:
#sidebar {
height: 600px; /* or whatever height you want */
overflow: scroll;
}
您的.container2上可能设置了高度:100%或类似的设置。您的container2上已经设置了“overflow:scroll”,这应该允许您的固定侧边栏滚动。因此,由于它不滚动,您可以尝试将“overflow:scroll”添加到#侧栏(container2的父元素)。也许父元素也是固定的??我为这项工作创建了一个简单的代码笔:
#sidebar {
height: 600px; /* or whatever height you want */
overflow: scroll;
}