网站侧边栏CSS

Question

我希望边栏在页脚之前结束。 该行显示侧边栏应在何处结束

第一个是侧边栏的CSS代码。 第二个是整个页面的HTML代码。

 #sidebar { float: right; background: #d1bdbd; padding: 10px; top: 65px; bottom: 0; right: 50px; position: absolute; } 

 <div class="row" id="sidebar" style="text-align: center"> <h3>Current Time:</h3> <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-161.swf width=200 height=100 wmode=transparent type=application/x-shockwave-flash> <h3>Most recent posts:</h3> @foreach (var post in ViewBag.SidebarPosts) { <div><a href="Posts/Details/@post.Id" class="hyperlink"> @post.Title</a> </div> } </div> @foreach (var post in Model) { <section class="row"> <article class="post col-md-8"> <h2 class="title"><a href="/Posts/Details/@post.Id" class="hyperlink">@post.Title</a></h2> <div class="about"> Posted on <i>@post.Date</i> @if (post.Author!=null) { @: by <i>@post.Author.FullName</i> } </div> <div class="body">@Html.Raw(Utils.CutText(post.Body)) @Html.ActionLink("Read more", $"Details/{post.Id}", "Posts")</div> </article> </section> } 

提前致谢。

Answer 1

您的页脚需要清除： 那就是说©2016 ...

您可以在页面模板或共享布局中找到其实际类。 如果您运行的是Firefox或chrome，则可以检查该元素，然后将其设置为同时清除两者。

Answer 2

为此，您可以使用flexbox布局（ css-tricks文章 ）

这是我为您提供的解决方案： http : //cssdeck.com/labs/ptuzfrep

header{background: yellow;}
section.container{
  display: flex;
}
section.content{
  background: red;
}
section.sidebar{
  background: blue;
  max-width: 300px;
}
footer{background: green;}


<header>Header</header>
<section class="container">
  <section class="content">
    content
  </section>
  <section class="sidebar">
    content
  </section>
</section>
<footer>Footer</footer>