Question

我已经尝试了一切！我根本无法让我的网站看起来像我想要的那样。

这是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">
    <ol>
        <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>
    </ol>
</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：

/* CSS Document */

/* CSS Reset*/
/* 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;

    height: 100%;
}

body{
    margin: 0 auto;
    padding-left: 0px;
    background: #3ee; /*<-------------- problem here bro */
    font-family:"Times New Roman", Times, serif;
    font-size: 1em;
    color: white;
}


#pageheader, #pageFooter {
    float:left;
    min-width:100%;
} 

/*Header Styles*/

#pageHeader{
    padding: 30px;
    font-size: 3em;
    font-family::"Arial Black", Gadget, sans-serif;
    background-color: #0F6; 
}

#pageHeader p{
    padding: 1px;
    font-size: .5em;
    font-family::"Arial Black", Gadget, sans-serif;
}

/*Body Styles*/

/*Navigation styles */

#navigation{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    float: left;
    background-color: #C09;
    position: inherit;
}

#navigation li{
    float: left;
    padding: 20px;
}

#navigation a:hover{
    color: #91BED4;
}


/* Main Content */

#main{
    min-height: 100%;
    width: 60%;
    margin: 0 auto;
    background:#F00;
    clear: both;
    color: #FFF
}

/* Footer */

#pageFooter{
    height: 150px;
    background: #00F;
    color:#CF0;
    font-size: 2em;
    /*position:fixed;
    bottom:0;*/
}

正如您所看到的，我对不同部分进行了颜色编码，以便了解受到什么影响的内容。由于某种原因导航div颜色不显示，而是采取身体的颜色。我希望这个页面有一个页眉和页脚，它扩展以填充屏幕，并且主内容块具有最小屏幕尺寸，但最小高度规格不起作用。

我该怎么做才能解决这个问题？对于我想要做的事情，有哪些有用的技巧？我是CSS新手，任何建议都很有用！

以下是网站的内容：http://imgur.com/OIuad

我似乎无法让红色框具有最小屏幕高度。

Answer 1

因为CSS中的宽度部分具有#header id但在代码中使用了pageHeader。

Answer 2

我不完全确定你在这里要求的是什么，页眉和页脚对我来说工作得很好。

至于高度，你是否试图让页脚留在底部，尽管内容很少？尝试谷歌搜索“css粘性页脚”。有几个人在那里玩，并了解他们的工作方式。

如何使页眉/页脚在宽度方向上延伸以适应屏幕，主要内容在高度方向上延伸以适应屏幕？

2 个答案: