Html 页眉和页脚不随正文一起滚动
我有一个网页，我正在工作。当前，页眉和页脚保留在页面上。唯一滚动的部分是主体。滚动条仅出现在页面的正文部分。我试图找出如何改变它，使整个页面滚动，而不是只有一个部分，其余部分被锁定到位。我尝试过从css中删除“position:fixed”，但除了从屏幕上完全删除页脚外，没有任何改变 这是我的CSSHtml 页眉和页脚不随正文一起滚动,html,css,Html,Css,我有一个网页，我正在工作。当前，页眉和页脚保留在页面上。唯一滚动的部分是主体。滚动条仅出现在页面的正文部分。我试图找出如何改变它，使整个页面滚动，而不是只有一个部分，其余部分被锁定到位。我尝试过从css中删除“position:fixed”，但除了从屏幕上完全删除页脚外，没有任何改变 这是我的CSS /******************************** * Shared Layout * *******************************
/********************************
* Shared Layout *
********************************/
#header {
padding: 5px 0px 0px 20px;
top: 0;
position: fixed;
height: 170px;
background-color: #000;
}
.logo-image {
float: left;
margin: 7px 20px 0px 0px;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
body {
background-color:#efeeef;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
overflow: hidden;
}
#body {
top: 170px; bottom: 130px;
background-color: #efeeef;
clear: both;
padding-bottom: 0px;
overflow-y: auto;
position: absolute;
}
.content-wrapper {
margin: 0 auto;
max-width: 1125px;
}
#footer {
position: fixed;
bottom: 0;
clear: both;
background-color: #000;
font-size: .8em;
height: 130px;
color: #FFF;
}
#footer, #body, #header {
left: 0; right: 0;
}
#follow-icons {
padding-top: 13px;
float: right;
}
#logo-table {
clear: left;
margin: 0 auto;
}
#logo-table td{
padding: 0px 10px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Atlas Web Pages</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
</head>
<body style="-webkit-box-shadow:3px 2px 15px #3D3D3D">
<header id="header">
<div class="web-header">
<div class="logo-image">
<img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
<br />
<div style="color:#FFF">*A southpaw's approach to bowling*</div>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("The Team", "About", "About")</li>
<li>@Html.ActionLink("Current Line-Up", "CurrentList", "Current")</li>
<li>@Html.ActionLink("Retired Equipment", "RetiredList", "Retired")</li>
<li>@Html.ActionLink("Tournaments", "TourneyInfo", "Tournament")</li>
<li>@Html.ActionLink("Bowling Videos", "Videos", "Video")</li>
<li>@Html.ActionLink("Sponsors", "Sponsors", "Sponsor")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div id="footer">
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year: Southpaw Web Solutions™ - Email: jmilam90@gmail.com</p>
</div>
<div id="follow-icons">
<a href ="www.facebook.com/jmilam90"><img src="~/Images/FBIcon.png" alt="Follow on Facebook" height="40" width="40" /></a>
<a href ="www.twitter.com/jmilam900"><img src="~/Images/TwitIcon.png" alt="Follow on twitter" height="40" width="40" /></a>
<a href ="https://www.youtube.com/channel/UCCSdkWipauQ1mhzEPAJfOnA"><img src="~/Images/YTIcon.png" alt="Subscribe on Youtube" height="40" width="40" /></a>
</div>
</div>
<table id="logo-table">
<tr>
<td>
<img src="~/Images/Logos/MBW.png" width="99" height="60" alt="McCorveys Bowling World Logo" />
</td>
<td>
<img src="~/Images/Logos/EboniteLogo.png" width="93" height="60" alt="Ebonite Logo" />
</td>
<td>
<img src="~/Images/Logos/TrackLogo.png" width="152" height="60" alt="Track Bowling Logo" />
</td>
<td>
<img src="~/Images/Logos/HammerLogo.png" width="100" height="60" alt="Hammer Bowling Logo" />
</td>
<td>
<img src="~/Images/Logos/ColumbiaLogo.png" width="123" height="60" alt="Columbia 300 Logo" />
</td>
<td>
<img src="~/Images/Logos/PBALogo.png" width="60" height="60" alt="PBA Logo" />
</td>
</tr>
</table>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
Atlas网页
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
*左撇子打保龄球的方法*
- @ActionLink（“主页”、“索引”、“主页”）
- @ActionLink（“团队”、“关于”、“关于”）
- @ActionLink（“当前队列”、“当前列表”、“当前”）
- @ActionLink（“退役设备”、“退役列表”、“退役”）
- @ActionLink（“锦标赛”、“锦标赛信息”、“锦标赛”）
- @ActionLink（“保龄球视频”、“视频”、“视频”）
- @ActionLink（“赞助商”、“赞助商”、“赞助商”）
@渲染部分（“特色”，必填项：false）
@RenderBody（）
&抄袭@DateTime.Now.Year:Southpaw Web解决方案和交易&trade；-电邮：jmilam90@gmail.com
@Scripts.Render（“~/bundles/jquery”）
@RenderSection（“脚本”，必需：false）
谁能告诉我需要删除/更改哪些内容才能允许整个页面滚动？在看不到HTML的情况下，您需要：
位置：固定#页眉#页脚顶部底部top:170px；底部：130像素和位置：绝对在#body
上。完全拆下车身
#header {
height:170px;
background-color:#000
}
.logo-image {
float:left;
margin:7px 20px 0 0
}
.clear-fix:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden
}
body {
background-color:#efeeef;
color:#333;
font-size:.85em;
font-family:"Segoe UI",Verdana,Helvetica,Sans-Serif;
margin:0;
padding:0;
overflow:hidden
}
.content-wrapper {
margin:0 auto;
max-width:1125px
}
#footer {
clear:both;
background-color:#000;
font-size:.8em;
height:130px;
color:#FFF
}
#follow-icons {
padding-top:13px;
float:right
}
#logo-table {
clear:left;
margin:0 auto
}
#logo-table td {
padding:0 10px
}
.float-left {
float:left
}
.float-right {
float:right
}
这绝对是一个位置的组合：固定和其他东西。请发布你的HTML，这样我们就可以看到页面的布局了。此外，虽然这不一定是一种不好的做法，但我不建议将任何ID或类命名为与任何HTML元素（body和#body）相同的名称。你可能会感到困惑，并意外地编辑了错误的CSS。我更新了它以显示HTML，我很感激关于命名的建议。我会在继续的时候考虑到这一点。太好了。修好了。谢谢但我现在有一个新问题。如果页面内容没有填满足够的屏幕，则页脚不会停留在屏幕底部。它直接位于内容下方@AtlasBowler在谷歌上查找粘性页脚。有很多资源描述了如何解决这个问题。最后我把页脚完全去掉了。这只是我为外观添加的一点额外的东西，但我移动了内容，这样我就不需要它了，我认为没有它看起来更好。我会记下来，以备将来参考。谢谢
#header {
height:170px;
background-color:#000
}
.logo-image {
float:left;
margin:7px 20px 0 0
}
.clear-fix:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden
}
body {
background-color:#efeeef;
color:#333;
font-size:.85em;
font-family:"Segoe UI",Verdana,Helvetica,Sans-Serif;
margin:0;
padding:0;
overflow:hidden
}
.content-wrapper {
margin:0 auto;
max-width:1125px
}
#footer {
clear:both;
background-color:#000;
font-size:.8em;
height:130px;
color:#FFF
}
#follow-icons {
padding-top:13px;
float:right
}
#logo-table {
clear:left;
margin:0 auto
}
#logo-table td {
padding:0 10px
}
.float-left {
float:left
}
.float-right {
float:right
}