我创建了一个页面，当它加载到网络上时显示出时髦。我的页脚没有出现。虽然我可以看到它在屏幕上短暂闪烁。我的代码中是否有某些内容可能会将其丢弃？
这是HTML
<div id="pageheader">
<img src="Assets/OLE logo.jpg" alt="https://olehealth123.sharepoint.com" />
<p>
<a href="https://interland3.donorperfect.net/weblink/weblink.aspx?name=E161841&id=1">Donate to OLE
</a>
</p>
</div>
<!--CS: Start Ribbon Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%@Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
<div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnonaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnoffaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<div id="ms-designer-ribbon">
<!--SID:02 {Ribbon}-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
</div>
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<!--CE: End Ribbon Snippet-->
<div id="s4-workspace">
<div id="s4-bodyContainer">
<div id="menu">
<ul>
<li>
<a href="https://olehealth123.sharepoint.com/">Home
</a>
</li>
<!--closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li>
<a href="#">Admin
</a>
<ul>
<li>
<a href="#">Human Resources
</a>
</li>
<li>
<a href="#">Finance
</a>
</li>
<li>
<a href="#">OLE Health Foundation
</a>
</li>
<li>
<a href="#">Marketing & Communications
</a>
</li>
</ul>
<!--closure of inner ul tag-->
</li>
<!--closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li>
<a href="#">Clinical Operations
</a>
<ul>
<li>
<a href="#">Operations Homepage
</a>
</li>
<li>
<a href="#">Calistoga
</a>
</li>
<li>
<a href="#">1100 Trancas
</a>
</li>
<li>
<a href="#">County Campus
</a>
</li>
<li>
<a href="#">Fairfield
</a>
</li>
<li>
<a href="#">Napa Pear Tree Lane
</a>
</li>
<li>
<a href="#">Clinical Pharmacy
</a>
</li>
<li>
<a href="#">Integrated Primary Care
</a>
</li>
<li>
<a href="#">Behavioral Health
</a>
</li>
</ul>
<!--closure of inner ul tag-->
</li>
<!--closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li>
<a href="#">Committees
</a>
<ul>
<li>
<a href="https://olehealth123.sharepoint.com/QICommittee">QI Committee
</a>
</li>
<li>
<a href="https://olehealth123.sharepoint.com/ecwcommittee/">eCW Optimization Committee
</a>
</li>
<li>
<a href="https://olehealth123.sharepoint.com/strategicplancommittees">Strategic Planning Committees
</a>
</li>
<li>
<a href="https://olehealth123.sharepoint.com/Quality Assurance Committees ">Quality Assurance Committees
</a>
</li>
<li>
<a href="https://olehealth123.sharepoint.com/Workgroups">Workgroups
</a>
</li>
<li>
<a href="https://olehealth123.sharepoint.com/Charters">Charters
</a>
</li>
</ul>
<!--closure of inner ul tag-->
</li>
<!--closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li>
<a href="#">Leadership Teams
</a>
<ul>
<li>
<a href="https://olehealth123.sharepoint.com/Executive%20Leadership%20Team">Executive Leadership Team
</a>
</li>
<li>
<a href="https://olehealth123.sharepoint.com/Operations%20Leadership%20Team">Operations Leadership Team
</a>
</li>
<li>
<a href="https://olehealth123.sharepoint.com/Clinical%20Leadership%20Team">Clinical Leadership Team
</a>
</li>
</ul>
<!--closure of inner ul tag-->
</li>
<!--closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li>
<a href="#">Patient Services
</a>
<ul>
<li>
<a href="#">Link 1
</a>
</li>
<li>
<a href="#">Link 1
</a>
</li>
<li>
<a href="#">Link 1
</a>
</li>
<li>
<a href="#">Link 1
</a>
</li>
</ul>
<!--closure of inner ul tag-->
</li>
<!--closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li>
<a href="#">Facilities
</a>
<ul>
<li>
<a href="#">Link 1
</a>
</li>
<li>
<a href="#">Link 1
</a>
</li>
<li>
<a href="#">Link 1
</a>
</li>
<li>
<a href="#">Link 1
</a>
</li>
</ul>
<!--closure of inner ul tag-->
</li>
<!--closing the main li tag-->
</ul>
<!--end of main ul tag-->
</div>
<!--end of main menu div-->
<div data-name="ContentPlaceHolderMain">
<!--CS: Start PlaceHolderMain Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
<div id="overlay">
<img alt="" height="548px" src="1414px%20pregancy%20classes.jpg" width="1414px" />
<h1>Perinatal Classes Start Today!
</h1>
</div>7:18 PM 2/18/2017
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End PlaceHolderMain Snippet-->
</div>
</div>
</div>
<footer>
<div id="footer">
<ul>
<li>@2017 OLE Health
</li>
<li>All rights reserved
</li>
</ul>
<ul>
<a href="#">
<li>Calistoga
</li>
</a>
<a href="#">
<li>County Campus
</li>
</a>
<a href="#">
<li>Fairield
</li>
</a>
<a href="#">
<li>Napa Pear Tree Lane
</li>
</a>
<a href="#">
<li>St. Helena
</li>
</a>
</ul>
<ul>
<a href="#">
<li>Integrated Primary Care
</li>
</a>
<a href="#">
<li>Behavioral Health
</li>
</a>
<a href="#">
<li>Clinical Pharmacy
</li>
</a>
</ul>
<ul>
<a href="#">
<li>Submit an IT Ticket
</li>
</a>
<a href="#">
<li>Submit a Data Request
</li>
</a>
<a href="#">
<li>Submit a Marketing Request
</li>
</a>
<a href="#">
<li>
<strong>Go back to Homepage
</strong>
</li>
</a>
</ul>
<ul>
<img src="Assets/olewhitelogo.png" alt=""/>
</ul>
</div>
</footer>
</div>
#container
{
width: 1414px;
margin:0 auto;
}
/* the original body tag had a left and right margin of 10% */
body {
width: 1414px;
margin-left: 10%;
margin-right: 10%;
}
/* CSS Document */
#menu {
width: 1414px;
margin-top: 1%;
padding-bottom: 2%;
}
#menu ul {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
}
#menu ul li {
background-color: #42A68A;
float: left;
position: relative;
border: 1px solid #FFFFFF;
list-style-type: none;
}
#menu ul li a {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana,
font-size: 14px;
color: #FFFFFF;
display: block;
line-height: 30px;
width: 200px;
height: 30px;
text-decoration: none;
}
#menu ul ul {
position: absolute;
visibility: hidden;
}
#menu ul li:hover ul {
visibility: visible;
}
#menu ul li:hover {
background-color: #327E68;
z-index: 1;
}
#menu ul li ul li a:hover {
background-color: #119872;
}
#menu ul li a:hover {
}
#pageheader p a:link {
display: inline-block;
padding: 1em 2em;
background-color: #D93006;
text-decoration: none;
color: #FFFFFF;
float: right;
margin-top: -6%;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana,
}
#pageheader p a:hover {
background-color: rgba(175,39,1,1.00);
}
#pageheader p a:visited {
color: rgba(255,255,255,1.00);
}
#footer {
position: relative;
clear:left;
width: 500px
background-color: rgba(143,143,143,1.00);
color: #FFFFFF;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana,
padding-top: 1%;
}
#footer ul {
position: relative;
float: left;
display: block;
list-style-type: none;
line-height: 255%;
padding-left: 4%;
padding-right: 4%;
}
#footer ul img {
margin-top: 14%;
}
#footer ul li {
}
#footer ul a:link{
color: rgba(255,255,255,1.00);
text-decoration: none;
text-align: left;
}
#footer ul a:visited{
color: rgba(255,255,255,1.00);
text-decoration: none;
text-align: left;
}
#footer ul a:hover{
color: rgba(211,211,211,1.00);
text-decoration: none;
text-align: left;
}
#footer ul a:link{
color: rgba(255,255,255,1.00);
text-decoration: none;
text-align: left;
}
#footer ul a:visited{
color: rgba(255,255,255,1.00);
text-decoration: none;
text-align: left;
}
#footer ul a:hover{
color: rgba(211,211,211,1.00);
text-decoration: none;
text-align: left;
答案 0 :(得分：0)
由于我看不到您的完整代码，我无法正确猜出问题。但我想也许你可以在你的CSS中尝试z-index。试试这个：
#footer {
z-index: 10000;
}
答案 1 :(得分：0)
我注意到有两件事会修复，这会让页脚再次出现。
您的#footer样式存在拼写错误，;属性和width: 500px属性后缺少分号font-family。
#footer {
position: relative;
clear:left;
width: 500px // semicolon missing here
background-color: rgba(143,143,143,1.00);
color: #FFFFFF;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana // semicolon missing here
padding-top: 1%;
}
如果您删除float: left内的#footer ul属性，请执行下一步。
答案 2 :(得分：-1)
确定。
现在我懂了：
第1步：完成所有Nikhil say以及更多错过;检查所有语法
第二名：谢谢你没有背景色的颜色，但你的所有区块都使用#ffffff
为什么会这样？
你在css中使用float:left;。
但为了正确使用浮动，您需要在样式div的容器末尾清除clear:both。通常，在css中，创建类clear看起来像这样：
.clear {
clear:both;
}
然后你可以像这样完成你的页脚：
...
</ul>
<div class="clear"></div>
</div>
</footer>
...
这将允许您的父块将背景颜色填充到他的所有高度。
但我建议您使用display:flex代替float。它好多了。