0
저는 CSS를 처음 사용하고 자습서를 읽고 샘플 코드를 읽었습니다. 지금은 가짜 열 방법 as described by Keith Donegan at Code-Sucks.com과 끈적한 바닥 글 솔루션 as described by Steve Hatcher을 사용하고 있습니다.가짜 열을 고정 푸터로 내림
div 태그를 페이지 아래쪽으로 확장하는 것과 관련하여 이미 게시 한 유사한 질문을 읽었지만 제대로 작동하지 않는 것으로 보입니다. 내 모든 CSS 클래스에 높이와 최소 높이를 100 %로 설정했지만 작동하지 않는 것 같습니다.
또한 현재 코드는 내 "래퍼"가 내 바닥 글을 푸시 할 때 여백이없는 문제가 있습니다. 좋은 5 픽셀 마진이 필요하지만 대신 완전히 사라집니다.
아래는 제 CSS입니다. 가독성을 위해 많은 의견과 크레딧을 가져 왔습니다. 어떤 도움을 주시면 감사하겠습니다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Faux Column CSS Layouts - 2 Column - faux-1-2-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<div id="main">
<!-- Begin Header -->
<div id="header">
This is the Header
</div>
<!-- End Header -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<h1>Faux Column CSS Layouts</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<div class="clear"></div>
</div>
<!-- End Right Column -->
<div class="clear"></div>
</div>
<!-- End Faux Columns -->
</div>
</div>
<!-- End Wrapper -->
<!-- Begin Footer -->
<div id="footer">
This is the Footer
</div>
<!-- End Footer -->
</body>
</html>
다음과 같이
* {margin:0;padding:0;}
html {height: 100%;}
body {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: auto;
width: 922px;
height: 100%;
}
#main {overflow:auto;
padding-bottom:155px; /* must be same height as the footer */
}
#faux {
background: #CCCCCC;
margin-bottom: 5px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
min-height:100%;
}
#header {
color: #333;
width: 902px;
padding: 10px;
height: 100px;
margin: 0px 0px 5px 0px;
background: #ABBEBE;
position: relative;
}
#leftcolumn {
display: inline;
color: #333;
margin: 10px;
padding: 0px;
width: 195px;
float: left;
min-height: 100%;
}
#rightcolumn {
float: right;
color: #333;
margin: 10px;
padding: 0px;
width: 683px;
display: inline;
position: relative;
min-height: 100%;
}
#footer {position: relative;
margin: 5px auto;
width: 902px;
margin-top: -155px; /* negative value of footer height */
height: 130px;
clear:both;
background: #ABBEBE;
color: #333;
padding: 10px;
}
#.clear { clear: both; background: none; }
내 HTML입니다.
[질문 바이올린] (http://jsfiddle.net/NGLN/aTJba/) – NGLN