网站边栏CSS

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

您的页脚需要设置为清除：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>