1
이 레이아웃 (이미지 : http://www.pricedesignstudio.com/download/divs.png 참조)을 사용하고 있는데 문제가 발생했습니다. 하단의 100 % 너비 (footerBottom) 바닥 글도 위쪽으로 확장하고 싶습니다. 아래쪽 내용 블록 (containerA)과 페이지 아래쪽 사이의 세로 간격을 채 웁니다. 필자는 추가 바닥 글의 절대 위치 지정 및 z- 인덱스를 사용하여 이와 유사한 작업을 수행하지만 최적이라고는 생각하지 않습니다. 어쨌든, 생각보다 설명하기가 쉽습니다. 입력 사항이 있으면 알려주십시오. 미리 감사드립니다!Crazy div 구조 CSS - 도와주세요
html, body {
text-align: center;
margin: 0;
padding: 0 0 0 0;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #fff url(images/bkgrnd_main.png) repeat-y center top;
}
.container {
width: 970px;
min-height: 95%;
position: relative;
border: none;
text-align: center;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
position:relative;
}
.containerA {
display:block;
min-height: 300px;
position: relative;
border: none;
text-align: left;
margin: 0 0 0 -10px;
padding: 0 12px 0 0;
position:relative;
background:#fff;
z-index:100;
}
.containerB {
display:block;
min-height: 300px;
position: relative;
border: none;
text-align: left;
margin: 0 -10px 0 0;
padding: 0 12px 0 0;
position:relative;
background:#fff;
z-index:100;
}
.container .inner {
display:block;
width:94%;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height:150%;
color: #666;
padding:12px 0 20px 0;
margin:0 auto;
border-top:solid 1px #ccc;
}
#header {
height: auto;
width: 100%;
padding: 12px 0 12px 12px;
margin: 0 0 0 0;
background-color: #fff;
display: block;
float: none;
clear: both;
position:relative;
text-align: left;
}
#headerTop {
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #fff;
display: block;
min-height:80px;
width:100%;
position:absolute;
top:1;
z-index:0;
}
#footer {
width: 100%;
height:100%;
margin: 0 0 0 0;
padding: 8px 0 0 0;
background-color: #fff;
display: block;
float: none;
clear: both;
text-align: center;
position:absolute;
bottom:0;
z-index:1;
}
#footerBottom {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #999;
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #fff;
display: block;
min-height:60px;
width:100%;
position:absolute;
bottom:1;
z-index:0;
text-align:center;
}
<div id="headerTop"></div>
<div class="container">
<div id="header"></div>
<div class="containerA"></div>
<div class="containerB"></div>
<div class="containerA"></div>
<div id="footer"></div>
</div>
Photoshop이나 Illustrator 파일을 실제로 디자인 했습니까? 그렇게한다면'.png' 파일로 내보내고 우리에게 보여주세요. 이미지와 설명이 도움이되지만 원하는 것을 이해하는 것은 여전히 어렵습니다. 너무 열심히 보지 않고서도 CSS를 상당히 줄일 수 있다고 생각합니다. 가장 좋은 추측은'container.php'를'100 %'에'min-height : 95 %'로 바꾸는 것입니다. 그러면 바닥 글이 Firefox의 적어도 하단에 닿게됩니다. IE7에서 얼마나 나빠 보이는지 잠시 보았습니다. (IE8의 Compatibility Mode를보고 무슨 뜻인지 알 수 있습니다.) – thirtydot
안녕하세요. 응답 해 주셔서 감사합니다. 10 명의 담당자가 필요하므로 이미지를 업로드 할 수 없으므로 여기에 모형집 링크가 있습니다. http://www.pricedesignstudio.com/download/screen1.png http://www.pricedesignstudio.com/download/screen2. png 저는 제 맥에서 IE의 CSS를 아직 테스트하지 않았습니다 ... 그러나 나는 그것이 펑키하다고 상상할 수 있습니다. –
나는 "흰색 배경이 아주 일직선이 아니다"라고 생각한다. 효과는 의도적이며 원하는 것인가? – thirtydot