私はこのひどいレイアウトを長い間機能させようとしてきましたが、非常にイライラしています。私は CSS を初めて使用するので、簡単に説明してください。しかし、スティッキー フッターやストレッチ コンテンツなどに関する多くの記事を調べましたが、まだ機能しません。最小高さは私には何もしません!
ページを埋めるのに十分なコンテンツがない場合に、サイトをどのように表示するかを次に示します。
そして、これは、コンテンツがスクロールするときにどのように見えるかです.
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;
}
この効果を得るにはどうすればよいですか？