나는 이 주제에 대한 많은 대답이 있다는 것을 알고 있지만 둘 다 나에게 도움이 되지 않았고 나는 며칠을 보냈다. 이 문제 답과 책의 90%는 나에게 도움이 되지 않는 이 배경 묘기를 보여준다.
HTML
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li><a href="#">ANALYTICS</a></li>
<li><a href="#">STYLES</a></li>
<li><a href="#">VOTERS</a></li>
<li><a href="#">GET STARTED</a></li>
<li><a href="#">UPDATE</a></li>
</ul>
</div>
<div class="content">
<p>Content</p>
</div>
</본문>
CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
지금 제 레이아웃은 다음과 같습니다.
이렇게 해 주세요.
복제 가능에 나와 있는 이 가이드를 따랐는데 도움이 되지 않았습니다. 플로트(floats)와 유체 레이아웃(fluid layout)을 사용하고 있기 때문인 것 같다.
유체 레이아웃과 플로트 위치를 유지하면서 어떻게 기둥을 늘릴 수 있습니까?
코드를 업데이트했습니다. 플런커에서 확인하십시오.
"처음에는 "절대적"이나 "상대적"의 위치가 필요하지 않다면 사용하지 않도록 한다.
두 번째는 '디스플레이: 인라인'과 '플로트: 레프트' 스타일을 부여하여 같은 방식을 취하므로 후자 스타일만 사용해도 충분합니다.
또 HTML과 BODY 태그의 높이를 100%로 설정하고 사이드바와 콘텐츠 DIV의 높이를 100%로 설정해 부모(몸)의 높이를 채운다.
마지막으로, 당신의 문제 중 하나는 '배경' 속성의 '반복 y' 값이었다. x축에서 반복되지 않았기 때문에 DIV의 실제 크기를 볼 수 없었습니다. 방금 repeat-y가 아니라 repeat으로 설정했어요.
다음과 같은 방법을 시도해 보십시오.
[FIDLE][1]
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
*
{
margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
height: 100%;
}
h1
{
height: 50px;
line-height: 50px;
}
.container
{
margin-top: -50px;
padding-top: 50px;
box-sizing: border-box;
}
.sideBar
{
float:left;
width: 100px;
background: aqua;
}
.content
{
overflow:hidden;
background: yellow;
}