3
DIV에 min0height 속성을 추가하여 100 %로 만들 때마다 작동하지 않습니다. 높이를 포함하여 모든 DIV에 추가했습니다 : 100 %; 최소 높이 : 100 %; 그러나 아무것도 작동하지 않습니다. 내가 그것을 연장하도록하기 위해서 내가 무엇을 할 것인가? 사이드 바의 배경과 컨텐트 영역의 배경색을 그냥 잘라냅니다.CSS : 최소 높이가 작동하지 않습니다.
(흰색 배경과 내용 영역은 일부 레이블을 찾기가 .col1.)
CSS :
@charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP/UNKNOWN/UNKNOWN/RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
HTML
<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1" id="contentDIV">
Content
</div>
</div>
<div class="col2">
Sidebar Content
</div>
</div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
내가 얻지 못하는 유일한 것은 바닥 글과 헤더가 단지 부동 div입니다. 사이드 바 및 콘텐츠에 대한 다른 div에 영향을 주어서는 안됩니다. 어쩌면 내가 틀렸을 수도 있지만 머리글과 바닥 글은 제대로 된 것 같습니다. – Devin
머리글과 바닥 글은 실제 높이가 아닌 내용 영역이있는 경우에는 아무런 문제가 없습니다. 그 끈적 인 바닥 글 기법은 바닥 글이있는 전체 높이 내용 영역을 얻는 유일한 기술입니다 ... 그리고 나는 (1990 년대 중반 이래로) 여러 해 동안 CSS의 톤을했습니다. .) – jrista