0
나는 이것을 오랫동안 그리고 너무 초조하게 작동시키는 나의 저주받은 레이아웃을 얻으려고 노력해왔다. 나는 CSS에 익숙하지 않으므로 제발 쉬워 라. 그러나 나는 끈적한 꼬리말과 스트레칭 내용, 기타 등등에 관한 많은 기사를 보았고 나는 아직도 그것을 얻을 수 없다. 최소 신장은 저를 위해 아무것도하지 않습니다! 여기 페이지 내용을 늘려 페이지 하단으로 꼬리말을 붙이려면 어떻게해야합니까?
Here is what i want my site to look like when it doesn't have enough content to fill a page.
And this is what i want it to look like when the content makes you scroll.
는 HTML 코드입니다 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to SilmanServer!</title>
<link href="./main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageHeader">
<h1>SilmanServer</h1>
<p>Aaron Silman's Personal Home Server </p>
</div>
<div id="navigation">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./projects.html">Projects</a></li>
<li><a href="./about.html">About Me</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
<div id="main">
<div>
<h2>What the hell?</h2>
<p>
This the project I embarked on around June of 2012 with an old computer that I had at home. My goal: To transform that old, useless HP Pavilion a6750y into a fully functioning webserver for this website! Along the way I also learned (X)HTML, CSS, Javascript, PHP, MySQL and a bunch of other things needed for designing and developing websites, as well as administrating my own server.
</p>
</div>
<div>
<h2> Why? </h2>
<p> As mentioned before, I really wanted to learn how to build websites that function both on the client side and server side. I wanted to just play around and learn. So I started learning, beginning with the basics. I will also use this website as documentation, tracking my progress and noting a lot of important steps so if anyone (including myself - in case I forget) wants a guide to setting up a server and learning web design and development they an refer to <a href="./guide_to_the_web.html">this page </a> for a complete, idiot-proof, guide to the web from scratch.
</p>
</div>
</div>
<div id="pageFooter">
<p> This is a footer
</p>
</div>
</div>
</body>
</html>
여기에 CSS는 다음과 같습니다
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* Global Styles */
html{
background: url(./images/sway.jpg);
background-attachment: fixed;
background-repeat::no-repeat;
}
body {
width: 80%;
margin: 0 auto;
}
/* pageHeader Styles */
#pageHeader{
height: 100px;
background:#999;
}
#pageHeader h1 {
padding-left: 30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 3.5em;
color:#F93;
}
#pageHeader p{
padding-left: 40px;
font-family: "Times New Roman", Times, serif;
font-size: 2em;
color: white;
}
/* navigation Styles */
#navigation{
float:left;
width:100%;
background: #0CF;
overflow: hidden;
position: relative;
}
#navigation ul{
}
#navigation li{
float: left;
margin: 0 20px;
font-size: 1.5em;
}
#navigation li a:link {color:#F60;} /* unvisited link */
#navigation li a:visited {color:##89ABFC;} /* visited link */
#navigation li a:hover {color:#3FF;} /* mouse over link */
#navigation li a:active {color:#009;} /* selected link */
/* main Styles */
#main{
width: 80%;
margin: 0 auto;
border: 2px solid black;
background: #999;
color: #FFF;
}
/* pageFooter Styles */
#pageFooter{
height: 100px;
background:#999;
}
#pageFooter h1 {
padding-left: 30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 3.5em;
color:#F93;
}
#pageFooter p{
font-family: "Times New Roman", Times, serif;
font-size: 2em;
color: white;
}
내가이 효과를 달성하기 위해 무엇을 할 수 있는가?
안녕하세요! 사람들이 당신을 도우려는 경우, 코드를 붙여야하는 경우, 잘못된 언어, 너무 긴 코드 조각 및 서식없는 코드는 피하십시오. 더 나은 방법은 온라인 샌드 박스에 대한 링크를 제공하거나 http://pastebin.me/ 또는 http://jsfiddle.net/ 또는 http://jsbin.com/ 또는 barebones 예제를 설정하는 것입니다. – Systembolaget