Html CSS主体不延伸到页面？
我拼命想弄明白为什么我为某个特定站点编写的代码不太管用 我的页面的主体（下面链接中的白色区域）应该从导航延伸到页脚，但只在某些页面上这样做 页脚将自动放置在每页的底部，而不考虑高度（即，在高度为400px的页面上，页脚将位于页面底部） 有没有可能我只是错过了一些基本的东西 我已在以下位置发布了该网站开发版本的链接：Html CSS主体不延伸到页面？,html,css,spacing,Html,Css,Spacing,我拼命想弄明白为什么我为某个特定站点编写的代码不太管用 我的页面的主体（下面链接中的白色区域）应该从导航延伸到页脚，但只在某些页面上这样做 页脚将自动放置在每页的底部，而不考虑高度（即，在高度为400px的页面上，页脚将位于页面底部） 有没有可能我只是错过了一些基本的东西 我已在以下位置发布了该网站开发版本的链接： 我遇到问题的页面是索引和“注册”链接。这是因为如果你有一个大的查看区域，没有足够的内容来填充整个页面。如果你在一个有较大窗口的显示器上看，你可以看到它并不是一直到页脚都是白色的 编
我遇到问题的页面是索引和“注册”链接。这是因为如果你有一个大的查看区域，没有足够的内容来填充整个页面。如果你在一个有较大窗口的显示器上看，你可以看到它并不是一直到页脚都是白色的
编辑：将行填充底部：100px添加到#bodyContainer，将页边距顶部：-100px添加到#footer，这样就可以了 这是因为如果你有一个大的观看区域，没有足够的内容来填满它。如果你在一个有较大窗口的显示器上看，你可以看到它并不是一直到页脚都是白色的
编辑：将行填充底部：100px添加到#bodyContainer，将页边距顶部：-100px添加到#footer，这样就可以了 style.css，第16行，删除高度：100% 现在 之后
style.css，第16行，删除高度：100% 现在 之后 为您的
#wrapperrepeat-yrepeat-y#wrapper编辑：同时将背景图像居中 试试这个。当然不是像我这样的内联CSS
<html>
<head>
<title>DIV Test</title>
<style>
body {
margin: 0;
}
#container {
height: 100%;
width: 100%;
}
#header {
background: #0000FF;
position: absolute;
top: 0;
height: 100px;
width: 100%;
}
#content {
background: #FF0000;
height: auto;
width: 100%;
}
#footer {
background: #00FF00;
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><!-- header content here --></div>
<div id="content"><!-- main content here --></div>
<div id="footer"><!-- footer content here --></div>
</div>
</body>
DIV测试
身体{
保证金：0；
}
#容器{
身高：100%；
宽度：100%；
}
#标题{
背景：#0000FF；
位置：绝对位置；
排名：0；
高度：100px；
宽度：100%；
}
#内容{
背景：#FF0000；
高度：自动；
宽度：100%；
}
#页脚{
背景：#00FF00；
位置：绝对位置；
底部：0；
高度：100px；
宽度：100%；
}
编辑：指出解决方案是什么。查看页眉和页脚CSS位置属性。这应该可以解决问题。试试这个。当然不是像我这样的内联CSS
<html>
<head>
<title>DIV Test</title>
<style>
body {
margin: 0;
}
#container {
height: 100%;
width: 100%;
}
#header {
background: #0000FF;
position: absolute;
top: 0;
height: 100px;
width: 100%;
}
#content {
background: #FF0000;
height: auto;
width: 100%;
}
#footer {
background: #00FF00;
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><!-- header content here --></div>
<div id="content"><!-- main content here --></div>
<div id="footer"><!-- footer content here --></div>
</div>
</body>
DIV测试
身体{
保证金：0；
}
#容器{
身高：100%；
宽度：100%；
}
#标题{
背景：#0000FF；
位置：绝对位置；
排名：0；
高度：100px；
宽度：100%；
}
#内容{
背景：#FF0000；
高度：自动；
宽度：100%；
}
#页脚{
背景：#00FF00；
位置：绝对位置；
底部：0；
高度：100px；
宽度：100%；
}
编辑：指出解决方案是什么。查看页眉和页脚CSS位置属性。这应该可以解决问题。PHP与它有什么关系？@shamittomar-我的网站大部分是用PHP和html混合编写的，所以不知道它是否会引起冲突。你可能想问一下PHP与它有什么关系？@shamittomar-我的网站大部分是用PHP和html混合编写的，所以不知道它是否会引起冲突任何冲突你可能想问这个问题，谢谢你的建议，但我以前试过，但没有成功。删除该行只会使页脚与页面的其余部分紧密相连（我将最新的CSS上传到我的网站，以显示我的意思）。除非页面向下滚动，否则页脚应该始终位于底部，并且与我的方式相同。这将撤消粘性页脚！谢谢你的建议，但我以前试过了，但没用。删除该行只会使页脚与页面的其余部分紧密相连（我将最新的CSS上传到我的网站，以显示我的意思）。除非页面向下滚动，否则页脚应该始终位于底部，并且与我的方式相同。这将撤消粘性页脚@鲶鱼-我通常会否决这样的答案，因为这是一个明显的“答案”，没有解决方案，因此我的问题摆在首位。有几种方法可以操作CSS（例如，我的页脚如何粘在每一页的底部，而不考虑高度），实际上，你只需要在#bodyContainer中添加填充底部。编辑后的答案对我来说更合适，我更喜欢它而不是我自己的答案。粘脚是硬的！（让我们去购物吧！）@Doug-虽然该解决方案在主页上有效，但不会在注册页面上。注意-它还创建了一个不必要的垂直滚动unfortunately@Catfish-我通常会否决这样一个答案，因为这是一个明显的“答案”，没有解决方案，因此我的问题摆在首位。有几种方法可以操作CSS（例如，我的页脚如何粘在每一页的底部，而不考虑高度），实际上，你只需要在#bodyContainer中添加填充底部。编辑后的答案对我来说更合适，我更喜欢它而不是我自己的答案。粘脚是硬的！（让我们去购物吧！）@Doug-虽然该解决方案在主页上有效，但不会在注册页面上。注意-不幸的是，它还创建了一个不必要的垂直滚动
<html>
<head>
<title>DIV Test</title>
<style>
body {
margin: 0;
}
#container {
height: 100%;
width: 100%;
}
#header {
background: #0000FF;
position: absolute;
top: 0;
height: 100px;
width: 100%;
}
#content {
background: #FF0000;
height: auto;
width: 100%;
}
#footer {
background: #00FF00;
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><!-- header content here --></div>
<div id="content"><!-- main content here --></div>
<div id="footer"><!-- footer content here --></div>
</div>
</body>