網站邊欄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>