css - 将布局更改为固定，居中，同时调整页脚以固定在底部

Question

好吧，我很新，在我来这里的过程中正在学习，所以在整个过程中添加了代码，并且可能会变得臃肿和冗余。

我正在尝试设计我的网站样式，以便所有内容都保持在页面中心。我最初完成了这项工作并查看了我想要的方式，但意识到一切都处于流畅的布局中。我希望信息保持固定，只是让背景颜色根据大屏幕的需要流畅地左右延伸。

我已经设法将页眉调整为居中的固定布局，但现在白色边框不会延伸到任何一侧以填充页眉空间的其余部分。我能够在流畅的布局中做到这一点，但现在不知道如何完成。

我也在尝试转换正文和页脚。目前，页脚是按照我在研究时发现的粘性页脚代码进行编码的，但是如上所述，它是流动的，并且调整浏览器大小导致我的文本在水平减小大小时移动，而页脚在更改垂直大小时滑动到正文后面浏览器。我想创建一个固定的、居中的页脚，它保留在页面底部，黑色背景流畅地向左右延伸以填充空间。

感谢您提供的任何帮助。

HTML:

<div id="page">

<div id="header">


</div>


<div id="main">

</div>

<div id="footer">
   <div class="footer-info">
  <ul>
         <li><p><strong>Address </strong> <br>
 Street<br>
 City, state, zip​<br>
 phone</p></li>
         <li><p><strong>Address </strong> <br>
 Street<br>
 City, state, zip​<br>
 phone</p></li>
         <li><p><strong>Address </strong> <br>
 Street<br>
 City, state, zip​<br>
 phone</p></li>
         <li><p>​© 2013​</p></li>
      </ul>
  </div>

</div>
</div>
</html>

CSS:

@charset "utf-8";


#header {
font: 100%/1.4 Open Sans, Verdana, Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
padding-top:10px;
padding-bottom:10px;
color: #7C0408;
width:1000px;
text-align:center;
}


body {
font: 100%/1.4 Open Sans, Verdana, Arial, Helvetica, sans-serif;
background-color: #eae5e5;
margin: 0;
padding: 0;
Height: 100%;
color: #000;
}


/*     BEGIN FOOTER     */


.footer-info li {
color: white;
background-color: black;
list-style-type:none;
margin: 0;
padding-left:10px;
display:inline-block;
}

.footer-info li:nth-child(4) {
font-size: 0.8em;
vertical-align:250%;
}

#footer {
Position: absolute;
Width: 100%;
Bottom: 0;
Height: 75px;  /* This value is the height of your footer */
font: 75%/1.4 Open Sans, Verdana, Arial, Helvetica, sans-serif;
background-color: black;
padding: 10px 0px 12px 0px;
text-align:center;
color: white;
}


/*     END FOOTER     */


Html {
Padding: 0;
Margin: 0;
Height: 100%;
}


#page {
Min-height: 100%;  /* for all other browsers */
height: 100%;  /* for IE */
position:relative;
}


#main {
Padding-bottom: 75px;   /* This value is the height of your footer */
}



/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
padding: 0;
margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
margin-top: 0;   
padding-right: 15px;
padding-left: 15px; 
}





/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  
float: right;
margin-left: 8px;
}
.fltlft { 
float: left;
margin-right: 8px;
}
.clearfloat { 
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Answer 1

我使用了您提供的 HTML 代码来回答，但我真的建议尝试更好地缩进并尝试找到一种方法来避免必须使用 <br>标签。我重写了 CSS，因为从头开始更容易。

我为您创建了一个 jsfiddle 并对其进行了注释，以便您了解 CSS 发生了什么。为了获得您想要的外观，页眉和页脚仍将是流动的(宽度方向)，但其中的文本/ Logo 将通过使用 CSS 固定，以确保它们位于中心。有多种方法来处理 header ，有些不使用额外的 <div> ，但实际上并没有任何关于那里会发生什么的信息。您还需要创建一个新的分区来容纳除页脚之外的所有内容，以便它可以正确缩放到您的页面高度。

http://jsfiddle.net/kHBC8/

我真的建议您看一下 http://www.cssstickyfooter.com/它很好地解释了如何获得您想要的粘性页脚，并且在您继续学习时将成为宝贵的资源。