我的侧边栏无论如何都是固定的。如何使用侧边栏进行滚动？ [英] My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?
本文介绍了我的侧边栏无论如何都是固定的。如何使用侧边栏进行滚动？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的侧边栏有点动态：我发布的文章越多，它就越大。但是，侧边栏也是固定的，这使得有时无法看到它的底部（当我减少浏览器窗口或有很多文章时）。
如何通过侧边栏滚动？
这是我的CSS文件，侧边栏主要由div表示，其中class =container2
My sidebar is a bit dynamic: the more articles I post, the larger it gets. However, the sidebar is also fixed, which makes it impossible to see its bottom at times(when I decrease the browser window or when there are a lot of articles). How do I make scrolling possible through the sidebar ? Here is my CSS file and the sidebar is mostly represented by the div with class= "container2"
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables */
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
position: relative;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #3BB9FF;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/*
footer{
background-color: #222;
div ul li{
display:block;
vertical-align: top;
width: 50%;
float: left;
}
}
*/
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
@extend .has-error;
.form-control {
color: $state-danger-text;
}
}
/* articles */
.container1 {
opacity: 0.75;
border: 1px solid #000000;
border-radius: 10px;
padding: 30px 75px 75px 100px;
overflow: scroll ;
}
.container1 p img {
float: left;
margin-top: 9px;
margin-right: 15px;
margin-bottom: 15px;
}
.container2 {
position: fixed;
padding: 0px 75px 20px 100px;
clear: both;
background-color: #FFFFFF; /*#F8F8F8;*/
border-radius: 5px;
overflow: scroll;
}
footer{
clear: both ;
padding: 30px 75px 75px 100px;
}
/*Search*/
.search {
padding:6px 15px 6px 30px;
margin:3px;
}
.lighter, .light, .dark {
width:95%;
height:50px;
}
.rounded {
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
我的侧边栏是，这是我的app / views / layouts / application。 html.erb和我的侧边栏由div内的内容表示：
My sidebar is the And here is my app/views/layouts/application.html.erb and my sidebar is represented by the content inside the divs:
<div class="col-md-2" id ="sidebar">
<div class="container2">
最后：app / views / layouts / application.html.erb：
And finally : 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>
如何使用侧边栏滚动以便我可以看到它的所有内容？
How do I make scrolling possible with the sidebar so that I can see all of its contents ?
推荐答案
您必须在侧边栏上设置高度，然后告诉溢出的内容滚动。这样的事情应该有效：
You have to set a height on your sidebar and then tell the overflowing content to scroll. Something like this should work:
#sidebar {
height: 600px; /* or whatever height you want */
overflow: scroll;
}
这篇关于我的侧边栏无论如何都是固定的。如何使用侧边栏进行滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
