Question

我希望侧边栏在页脚之前结束。 The line shows where the sidebar should end

第一个是侧边栏的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

您可以在页面模板或共享布局中找到它的实际类。如果您正在运行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>

网站边栏CSS

2 个答案: