blocks|key|1990563|text|您的主div+(大概)中有一个破损的标记，浏览器正在关闭它们作为紧急修复。重复检查你的开始/结束标签是成对的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1990564|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You have a broken tag inside your main div (presumably) and the browsers are closing them as an emergency fix. Double check your opening/closing tags are paired.

blocks|key|996470|text|我想问题可能出在这个问题上|type|unstyled|depth|inlineStyleRanges|entityRanges|data|996471|<div+class="bottom_line"++style="bottom:-200px;">|code-block|syntax|javascript|996472|这发生在你包括你的短信之前。因此，文本相对于底部对齐，并在“脚注”(在http://www.primalventures.co.uk/Hammersmith/recreation.html中观察到)的顶部结束。|offset|length|996473|entityMap|0|LINK|mutability|MUTABLE|url|http://www.primalventures.co.uk/Hammersmith/recreation.html^0|0|0|Z|1N|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I think the problem may be in the line

<pre><code>&lt;div class="bottom_line" style="bottom:-200px;"&gt;
</code></pre>

which happens before you include your text. This text is therefore aligned relative to the bottom, and ends up on top of the "footer" (this observed in <a href="http://www.primalventures.co.uk/Hammersmith/recreation.html" rel="nofollow">http://www.primalventures.co.uk/Hammersmith/recreation.html</a>)

blocks|key|993089|text|所有div的高度都以像素为单位定义。如果您有关于某些页面的更多信息，则需要重新定义这些页面上的高度。例如，在娱乐页面上，如果将“主”div高度设置为1050+on，则可以。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|993090|如果您希望页面根据内容自动重新对齐，则需要在不定义高度的情况下完全重新设计页面，而需要正确地浮动和定位所有内容。|993091|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The heights of all your div's are all defined in pixels. If you have more information on certain pages you need to re-define the heights on those pages. For example, on the recreation page, if you set the "main" div height to 1050px, its fine.

If you wanted the page to automatically re-align depending on the content, you would need to completely redesign the page without defining heights, and instead floating and positioning everything properly.

blocks|key|993093|text|元素bottom_line和主元素的固定高度分别为250+of和850+of。但你有更多的短信。当你使用位置:绝对代表你的底线，没有任何东西散落在这些维度上。移除固定的高度，它就像一种魅力。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|993094|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

your element bottom_line and your main-element have a fixed height of 250px and 850px. But you have more text in it. As you use position:absolute for your bottom line, nothing streches over those dimensions. Remove the fixed height and it works like a charm.

blocks|key|1990669|text|添加填充-底部等于页脚的高度#main。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1990670|#main
{
+++++padding-bottom:200px;
}|code-block|syntax|javascript|1990671|这里有一个链接，它解释了如何构造html和css，使页脚保持在底部。我已经在我的网站上使用了它，它的工作就像一个魅力！|1990672|http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page|offset|length|1990673|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|24|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

Add padding-bottom equal to the height of the footer on #main.

<pre><code>#main
{
 padding-bottom:200px;
}
</code></pre>

Here is a link which explains how to structure the html and css to make the footer stick at the bottom. I have used it in my website and it works like a charm!

<a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" rel="nofollow">http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page</a>

Im new here. I have been working on a site (Still learning).

The sliced PSD is www.primalventures.co.uk/h2

The coded version with CSS and HTML is www.primalventures.co.uk/hammersmith

The second site throws an ugly error on the pages 

<ul>
<li>Specification</li>
<li>Amenities</li>
<li>Recreation</li>
</ul>

The footer does not stay below the content as you can see on the other pages.

Not sure how to fix the DIV.

<pre><code>#footer {
width: 100%;
height: 130px;
background: grey;
}
</code></pre>

Thanks,

PV

CSS/HTML - DIV doesnt stay aligned to bottom

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我是新来的。我一直在网站上工作(还在学习)。切片PSD为www.primalventures.co.uk/h2。CSS和HTML的编码版本是: www.primalventures.co.uk/hammersmith第二个站点在页面上抛出一个丑陋的错误。规格说明便利设施娱乐页脚不会停留在内容下面，就像您在其他页面上看到的那样。不知道该怎么修复DIV。#footer  {width: 100%;he

问CSS/HTML不与底部保持一致
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/HTML不与底部保持一致EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/HTML不与底部保持一致
EN