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发生了什么。为了获得你想要的外观，页眉和页脚仍然是流畅的（宽度方面），但它们内部的文本/徽标将通过使用CSS来确定它们是否放置在中心。有多种方法可以执行标题，有些方法不使用额外的<div>，但实际上并没有任何关于将会发生什么的信息。您还需要创建一个新的部门来保存除页脚之外的所有部分，以便它可以正确地缩放到页面的高度。

http://jsfiddle.net/kHBC8/

我真的建议你看看http://www.cssstickyfooter.com/它非常适合解释如何获得你想要的粘性页脚，并且在你继续学习的过程中将成为宝贵的资源。

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

1 个答案: