1
그래서 여러 사이트를 구축 했으므로 언제든지이 문제를 해결할 수 있습니다. 그러나 이번에 나는 붙 잡혔다.상위 div와 중복되는 HTML/CSS div
나는이 div 안에 래퍼 div가 있습니다. 두 div가 있습니다. 내부 div가 wrapper div의 길이를 초과하면 중복됩니다. 내 목표는 wrapper div가 내부 div처럼 동일한 높이를 얻는다는 것입니다. http://i.stack.imgur.com/bBW8g.jpg
내 코드를 많이 게시 한 :
<body>
<!-- Begin of site -->
<div id="wrapper">
<!-- Site Wrapper -->
<div id="site-wrapper">
<!-- Header -->
<div id="header"></div>
<!-- end Header -->
<!-- Column positioner -->
<div id="colpos">
<!-- Column Left -->
<div id="columnLeft">
<div id="mainWrap">
<div id="contentBar"></div>
<div id="main">
Content
<div id="longDiv">Very long</div>
</div>
</div>
</div>
<!-- Column Right -->
<div id="columnRight">
<div id="links">
<div id="navBar"></div>
Links
</div>
</div>
</div>
<!-- einde Column positioner -->
<div id="footer">Copyright</div>
</div>
<!-- end Site Wrapper -->
</div>
<!-- end site -->
</body>
그리고 해당 CSS : 짧은
/*==============================
SITE RESETS
===============================*/
html {
margin: 0px;
padding: 0px;
font-family: Calibri, arial;
}
body{
margin: 0px;
padding: 0px 0px 50px 0px;
border: 0px;
background: url('img/background.png');
}
a img { border:none; }
#longDiv{
height: 2000px;
color: white;
background-color: black;
}
/*==============================
SITE WRAPPER
===============================*/
#wrapper{
width: 1200px;
margin: 0px;
padding: 0px;
border: 0px;
}
#site-wrapper{
width: 970px;
margin: 0px 0px 30px;
padding: 0px;
border: 0px;
position: relative;
background-color: #ebebeb;
left: 115px;
top: 30px;
}
#header{
clear: both;
min-width: 970px;
width: 100%;
height: 190px;
margin: 0px;
padding: 0px;
border: 0px;
background: #fff url('img/header.png');
background-repeat: repeat-x;
position: relative;
top: 30px;
}
#colpos{
clear: both;
float: left;
height: 100%;
min-height: 100px;
width: 920px;
padding: 50px 20px 20px 20px;
margin: 0px;
border: 0px;
}
#columnLeft
{
float: left;
width: 620px;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
border: 0px;
}
#columnRight
{
float: right;
width: 265px;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
border: 0px;
}
/*==============================
Content
===============================*/
#mainWrap{
float: left;
width: 100%;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
background: white;
border: 1px solid #689e9f;
}
#contentBar{
float: left;
min-width: 620px;
width: 100%;
min-height: 23px;
margin: 0px;
padding: 0px;
border: 0px;
background: #689e9f url('img/content.png');
background-repeat: no-repeat;
}
#main{
clear: both;
height: 100%;
min-height: inherit;
float: left;
margin: 5px 5px 5px 5px;
max-width: 620px;
height: inherit;
font-family: Calibri, arial;
}
#links{
float: left;
width: 100%;
min-height: 250px;
margin: 0px;
padding: 0px;
background: white;
border: 1px solid #689e9f;
}
#navBar{
float: left;
min-width: 265px;
width: 100%;
min-height: 23px;
margin: 0px;
padding: 0px;
border: 0px;
background: #689e9f url('img/nav.png') right;
background-repeat: no-repeat;
}
#footer
{
clear: both;
margin: 10px 10px 10px 10px;
width: 50%;
position: relative;
top: 0.5em;
left: 25%;
font-family: Calibri, arial;
color: white;
text-align: center;
font-style: italic;
background-color: #689e9f;
}
내 문제는 여기에
은 내가 사용하는 코드입니다 가능한 한 당신이 저의 실수를 지적 할 수 있기를 바랍니다. 저는 보통 온라인으로 도움을 요청하는 사람이 아니지만이 문제는 저를 오랫동안 괴롭 히고 있습니다. 사전에감사합니다, 래퍼 100 %의 높이를 정의함으로써 EvilTuinhekjeNL
내 브라우저 (Chrome Canary)의 콘텐츠에만 머물러 있습니다. -> http://jsfiddle.net/RCFdz/ – PeeHaa