网站侧边栏CSS

Question

I want the sidebar to end just before the footer. The line shows where the sidebar should end

The first one is the CSS code of the sidebar. The second one is the HTML code of the whole page.

 #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> } 

Thanks in advance.

Answer 1

your footer needs to be set to clear:both; that would be the section that says © 2016...

You may find its actual class in a page template or in the shared layout. If you are running firefox or chrome you can inspect the element and then set it to clear both.

Answer 2

to do that you can use the flexbox layout ( css-tricks article )

Here's my solution for your case : 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>