8月26日Verlog
学習の内容
https://www.youtube.com/
[html] youtube left navにスクロール
->youtube left contentの内容は影響を受けません
Youtube実習
https://www.youtube.com/
フレーム全体の作成
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>유투브 튜토리얼</title>
</head>
<body>
<div id="wrapper">
<nav id="youtube_top_nav">
</nav>
<nav id="youtube_left_nav">
<div id="youtube_left_content">
</div>
</nav>
<main role="main" id="youtube_main">
</main>
</div>
</body>
</html>
[css]* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: top;
}
button {
background: transparent;
border: none;
}
input {
border: none;
outline: none;
}
input:focus {
outline: none;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 1320px;
}
#youtube_top_nav {
position: fixed;
width: 100%;
height: 56px;
background-color: #202020;
}
#youtube_left_nav {
position: fixed;
width: 240px;
background-color: #212121;
top: 56px;
left: 0;
bottom: 0;
/*overflow-y: auto;*/
overflow-y: overlay;
overflow-x: hidden;
}
#youtube_left_nav #youtube_left_content {
position: absolute;
height: 100%;
background-color: gray;
left: 0;
right: 24px;
}
#youtube_main {
position: absolute;
background-color: #181818;
top: 56px;
left: 240px;
right: 0;
bottom: 0;
}
->youtube left contentの内容は影響を受けません
Reference
この問題について(8月26日Verlog), 我々は、より多くの情報をここで見つけました https://velog.io/@ryuyoungseo8232/826Velogテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol