0
flex를 사용하여 화면 오른쪽에 시간 아래로 스크롤 할 수있는 사이드 바를 만들고 싶습니다. 나는 열을 설정했지만 어떤 이유로 사이드 바 열이 맨 오른쪽의 내용 대신 주 내용 열 아래에 나타납니다. 클래스는 "sidebar-column-right"및 내용 오른쪽입니다. 임 플렉스 박스를 사용하는 것에 익숙하지 않으므로 아마 뭔가 잘못된 것이 있습니다.플렉스 박스를 사용하여 사이드 바 만들기
<html>
<head>
<title>Militia</title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="main-content.css">
</head>
<body>
<div id="container";>
<header>
<ul class="left";>
<li class="nav";><a class="a a-nav-top leftbuttons"; href="#">Home</a></li>
<li class="nav";><a class="a a-nav-top leftbuttons"; href="#">Shop</a></li>
<li class="nav";><a class="logobutton"; href="https://www.youtube.com/channel/UCmZOe6sv3wuq97Vo-9Rdyyw"; target="_blank";>RG</a></li>
<li class="nav";><a class="a a-nav-top rightbuttons"; href="#">Archives</a></li>
<li class="nav";><a class="a a-nav-top rightbuttons"; href="#">Suggestions</a></li>
</ul>
</header>
<div class="home";>
<h1>Home</h1>
<p>Hello welcome to my site you guys know me already Recht A.K.A Domo. Here you can find my video upload schedule, previous video, current video, and you can make suggestions on what games I play.</p>
<hr>
<div class="main-content-column-left";>
<div class="content-left";>
<h2>Previous Video (As of Jun-29-16):</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/bDXMLKNPUGw" frameborder="0" allowfullscreen></iframe>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, sale labore in mea. Eirmod deleniti probatus ne quo, nec cu graeci appellantur, latine denique usu ea. Pri nonumes quaerendum cu. Tollit possim accommodare ei vel, ne augue ludus constituto sea. Mel summo scripta omittantur ad, cum ei zril quaeque definiebas.</p>
</div>
<div class="content-left">
<h3>Upload Schedule:</h3>
<ol>
<li id="schedule";>Mondays: Upload</li>
<li id="schedule";>Tuesday: Upload</li>
<li id="schedule";>Wendsday: Upload</li>
<li id="schedule";>Thurday: Break</li>
<li id="schedule";>Friday: Upload</li>
<li id="schedule";>Saturday: Production</li>
<li id="schedule";>Sunday: Production</li>
</ol>
</div>
</div>
<div class="sidebar-column-right">
<div class="content-right";>
<h2>Im a side bar</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>
</div>
</div>
#container { /* added */
width: 100%; /* adjust to your needs */
max-width: 100%; /* responsive */
margin: 0 ; /* horizontal centering */
border: solid #DC143C;
color: #DC143C;
}
.home{
color: #DC143C;
}
.main-content-column-left{
color: #DC143C;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.sidebar-column-right{
border-left: solid 1px;
display: flex;
color: #DC143C;
border: solid 1px red;
width: 33.3%;
overflow-y: auto;
}
.content-left > iframe { /* added */
width: 560px;
height: 315px;
max-width: 100%;
max-height: 100%;
color: #DC143C;
}
.content-left{
color: #DC143C;
width: 33%;
}
.content-right{
}
h1{
color: #DC143C;
text-align: center;
}
h2.previousvid
{
text-align: left;
font-size: 20px;
}
h3.sidecontent{
text-align: right;
}
hr{
border: 1px solid #DC143C;
}
ol {
list-style-type: decimal;
}
그래이 내가 원하는하지만 어떻게 내가 사이드 바는 자신의 스크롤을 만들 것 무엇인가? – Recht88
@ Recht88 플 런커 코드가 업데이트되었습니다. Pls 그것이 당신이 기대하는 것인지 확인하십시오. –
네, 그게 좋겠지 만 사이드 바 스크롤은 화면이 특정 크기이고 가득 차 있지 않을 때만 나타납니다. – Recht88