div 세로 100% 정렬 도와주세요
요즘 div 공부하는데 세로 100% 정렬이 안되서 질문 드립니다.
검색해봐도 마땅히 찾질 못하겠네요
스크립트나 다른거 안쓰고,
순수 div로는 구현이 안되는건가요?
ie로 확인하면서 연습하는데 안되네요
도와주세요
#content {
width: 822px;
height: auto;
display:block;
background: #660099;
overflow:auto;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height:100%;
width: 200px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: auto;
width: 578px;
display: inline;
}
<div id="content">
<div id="leftcolumn">
Left Column<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
Left Column<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
Left Column<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</div>
<div id="rightcolumn">
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
</div>
<div style="clear:both;"></div>
검색해봐도 마땅히 찾질 못하겠네요
스크립트나 다른거 안쓰고,
순수 div로는 구현이 안되는건가요?
ie로 확인하면서 연습하는데 안되네요
도와주세요
#content {
width: 822px;
height: auto;
display:block;
background: #660099;
overflow:auto;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height:100%;
width: 200px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: auto;
width: 578px;
display: inline;
}
<div id="content">
<div id="leftcolumn">
Left Column<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
Left Column<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
Left Column<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</div>
<div id="rightcolumn">
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="#">Download this CSS Layout</a><BR><BR><BR><BR><BR><BR><BR><BR>
</div>
<div style="clear:both;"></div>
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 5개
body {height:100%;}
#content {
height: 100%;
overflow:hidden;
}
height:100%라는건 설정한거에서부터 종속되는거니깐 최상위 html까지 가셔서 설정을 지정해주셔야 기준이되죠.
혹시나 해서 말씀하신데로 해봐도 변함이 없네요
훔,, 소스가 잘못된거같은데,,,아이고 두야 ㅎㅎ
div&css 만으로 안되는거라면 다른분들은 어떤식으로 하시는지요
전에 content에 leftcolmn width 사이즈크기의 배경을 깔아서 반복을 y로 줘서 leftcolmn인척 해서 만들었었는데.
관심가져주셔서 감사합니다
더 공부해서 풀어야겠네요