网站侧边栏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

你的页脚需要设置为clear:both;这部分会说软件是2016年……

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

Answer 2

您可以使用flexbox布局(css-tricks article)

这是我对你的情况的解决方案: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>