1

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

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

我已经设法将标题调整为固定布局到中心但现在白色边框不会延伸到任何一侧以填充标题空间的其余部分。我能够在流畅的布局中做到这一点，但现在无法弄清楚如何做到这一点。

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

感谢您提供任何帮助。

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​&lt;br>
 phone</p></li>
         <li><p><strong>Address </strong> <br>
 Street<br>
 City, state, zip​&lt;br>
 phone</p></li>
         <li><p><strong>Address </strong> <br>
 Street<br>
 City, state, zip​&lt;br>
 phone</p></li>
         <li><p>​© 2013​&lt;/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;
}
4

1 回答 1

0

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

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

http://jsfiddle.net/kHBC8/

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

于 2013-07-25T18:21:01.793 回答