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

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

css

Css 如何使页眉/页脚沿宽度方向延伸以适应屏幕，使主要内容沿高度方向延伸以适应屏幕？,css,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="Co

我什么都试过了！我根本无法让我的网站看起来像我想要的那样

这是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>


欢迎使用SilmanServer！
锡尔曼服务器
Aaron Silman的个人家庭服务器





我勒个去？

这是我在2012年6月左右用家里的一台旧电脑开始的项目。我的目标是：将旧的、无用的HP Pavilion a6750y改造成一个功能齐全的网站服务器！在此过程中，我还学习了（X）HTML、CSS、Javascript、PHP、MySQL以及设计和开发网站以及管理自己的服务器所需的一系列其他东西。

为什么？

如前所述，我真的很想学习如何构建在客户端和服务器端都起作用的网站。我只想到处玩，学习。所以我开始学习，从基础开始。我还将使用此网站作为文档，跟踪我的进度，并记录许多重要步骤，因此，如果任何人（包括我自己，以防我忘记）想要一份关于设置服务器和学习web设计与开发的指南，他们可以参考一份完整的、防白痴的、从头开始的web指南。

这是一个页脚

下面是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;*/
}

/*CSS文档*/
/*CSS重置*/
/*Eric Meyer的重置CSS v2.0-http://cssreset.com */
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，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，dd，ol，ul，li，fieldset，form，label，ledge，table，table，table，table，title，tbody，tfoot，thead，tr，th，th，td，article，article，side，canvas，detail，detail，bed，bedded，str，hgroup，menu，nav，output，ruby，section，summary，time，mark，audio，video{边框：0；字体大小：100%；字体：inherit；垂直对齐：基线；边距：0；填充：0}文章，旁白，细节，figcaption，图形，页脚，页眉，hgroup，菜单，导航，section{显示：块体{线高：1}ol，ul{列表样式：无}块引号，q{引号：无}块引号：前，块引号：后，q:before，q:after{content:none}表{边框折叠：折叠；边框间距：0}
/*全局样式*/
html{
背景：url（./images/sway.jpg）；
背景附件：固定；
背景重复：不重复；
身高：100%；
}
身体{
保证金：0自动；
左侧填充：0px；
背景：#3ee；/*因为CSS中的宽度部分有#页眉id，但在您使用pageHeader的代码中。
我不完全确定您在这里要求什么，页眉和页脚在宽度方面对我来说工作得很好
至于高度，尽管有少量内容，你是否试图让页脚保持在底部？试试谷歌搜索“css sticky footer”。还有一些，所以请与它们一起玩，了解它们是如何工作的。
你在float:left
之后缺少了一个分号，这导致背景色
行被忽略。啊，非常感谢你！我编辑了原始帖子，解决了颜色与导航不匹配的问题，但是主图标ntent仍然没有全屏的最小宽度。对此我该怎么办？看看这个，这是我想要的行为吗？是的，这几乎正是我想要的，除了我想要Nagiviation（紫色框）和主要内容（红色框）屏幕宽度为60%，以边距为中心：0自动。正如您所看到的，#主块中有一个宽度：60%没有缩小其宽度。您是如何学习CSS的？我在学习过程中遇到了困难，因为我遇到了这些问题，不知道如何解决它们。感谢大家的提醒，我在cod中进行了更改e和原始帖子反映了这一点，但我仍然遇到了一个问题。这就是它现在看起来的样子，我试图让红色框具有屏幕大小的最小高度：我试图使红色框向下延伸，带有空白内容，直到页脚底部，直到页面底部，如果它们的高度大于e没有足够的内容可以滚动一页，我希望它只是在主要内容的底部。是的，你需要一个粘性的页脚。在css中，这比它应该的要复杂一点，但是遵循教程，你会没事的。为什么min height:100%在这种情况下不起作用？我要求学习更多关于css的知识，因为我是一个新手。我想了解为什么appl将最小高度添加到主要内容不会将页脚推到底部，事实上，这根本不起作用。谢谢你的建议，顺便说一句！百分比不是这样工作的。别担心，大多数人在开始时都会犯这个错误。100%表示元素的100%内容，而不是包含div的部分。因此，如果你有一个20像素高的元素d你应用高度：100%，然后你把它设为20px的100%，也就是20px。你试图把它设为它所在的div的100%，所以这没有帮助。我明白你的意思，所以当我阅读添加最小高度：100%时，我想它指的是主体，它在html标记中，所以它们实际上得到了100%的屏幕效果，而我没有因为我的main在body标记内。我取消了#pageFooter底部的行的注释，该行表示位置：固定；底部：0；但这只是将页脚放在底部，而没有扩展body和main。但是如果我将minheight放在body标记和main content标记内，我觉得它应该可以工作，但它只会扩展蓝色主体框，不是红色主体框。