웹 사이트 사이드 바 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 ...

페이지 템플릿이나 공유 레이아웃에서 찾을 수 있습니다. 파이어 폭스 또는 크롬을 실행중인 경우 요소를 검사 한 다음 모두 지우도록 설정할 수 있습니다. 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> 

Answer 2

당신이 인 flexbox 레이아웃을 사용할 수 있도록 할 ( css-tricks article)

는 여기에 귀하의 사건에 대한 내 솔루션입니다.