Боковая панель сайта 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

нижний колонтитул должен быть очищен: оба; это будет раздел, который гласит: © 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>