所以我有一个名为的类main
,其中包含整个网站的内容。由于我正处于构建网站的开始阶段,我想确保我的代码中没有错误,例如缺少结束标记或结束引号等。帮助我确保这一点的一件事是用五颜六色的元素包围我的元素边界。
我的主 div 应该被红色边框包围,但是,边框没有包围整个div
容器,这告诉我我的标记有问题。我一直试图解码这个很长时间没有成功。我希望也许这里有人可以帮我解决这个问题?
所以我有一个名为的类main
,其中包含整个网站的内容。由于我正处于构建网站的开始阶段,我想确保我的代码中没有错误,例如缺少结束标记或结束引号等。帮助我确保这一点的一件事是用五颜六色的元素包围我的元素边界。
我的主 div 应该被红色边框包围,但是,边框没有包围整个div
容器,这告诉我我的标记有问题。我一直试图解码这个很长时间没有成功。我希望也许这里有人可以帮我解决这个问题?
您已将主 div 的高度设置为内联样式:
<div id="main" style="width:900px; margin-left:auto; height:1200px; margin-right:auto;">
如果您希望它扩展以适应内容,请删除高度,否则它将固定在 1200 像素。
您的主 div 的高度为 1200 像素,并且内容大于此宽度,因此边框不会显示在溢出的内容上,您可以通过增加显示的高度来检查。
我想这并不能回答您的具体问题 - 但在调试标记和检查其质量方面,您可以使用holmes.css
“CSS Markup Detective” http://www.red-root.com/sandbox/holmes/ 它突出了潜力标记中的错误和错误。在您的开发版本中包含该holmes.css
文件(或使用该链接上提供的书签工具)。
您的主 div 的高度为 1200 像素...删除它并让主 div 扩展到包含的高度。
如果您删除 jsfiddle 示例中的背景颜色,您会看到红色边框包裹在“carousel”div 下方。这是因为您已经为“主”div 指定了一个硬编码的高度。我不知道这是因为你希望它是最小高度——在这种情况下你应该使用min-height
——还是因为你希望它是绝对高度。不管怎样,盒子的内容已经溢出了它的容器,这就是为什么你看不到红色边框的底部。
如果您希望“主”具有准确的高度并具有滚动条,请添加overflow-y: auto;
到“主”div 的样式中。否则,正如我上面提到的,要么完全删除高度声明,要么使用min-height: 1200px;
“主” div 增长来保存您的内容。