1

我正在尝试设计一个单页网站（没有垂直和水平滚动）。现在我的结构是：

container-->height: 100%
   header-->height: 10%
   main-content-->height: 80%
   footer-->height: 10%

该页面完全符合我在Mozilla Firefox中的要求。但是，在Chrome1-2px中，页脚底部和浏览器底部之间会出现一个黑色空间（约）。在Safari中，右侧会出现一个垂直滚动条。

我在 Windows 上工作，并且没有对任何元素应用任何边距/填充{顶部或底部}。

编辑#1

我还使用了一个滑块main-content，我必须为某些 div 指定固定高度。

4

4 回答 4

2

您提到“主要内容”的高度应为 80%（这与两个 10% 的值相加很好），但在您的代码（HTML 或 CSS）中没有任何地方实际上指定了 80%。

我在“主要内容”中看到的是一堆嵌套的 DIV，所有这些 DIV 都指定了固定像素高度，所以我不确定这是如何工作的。

从添加height: 80%;to开始#main-content，去掉所有嵌套在里面的 DIV 的所有固定高度#main-content，然后计算出下一步需要做什么。

编辑：你提到你的代码在 FireFox 中工作，但我唯一能想到的是它工作在你的 FireFox 窗口的确切像素大小，而不是其他大小。如果调整 FireFox 窗口的大小，它看起来还可以吗？

于 2013-01-03T11:39:15.063 回答
1

欢迎来到 Web 开发的世界。我建议从 CSS 重置开始，以确保布局一致。如果您不喜欢使用 Yahoo 的工具，那么 Google ofCSS reset是一个不错的起点。

雅虎提供了很好的工具来促进：http: //developer.yahoo.com/yui/reset/。

基础的 YUI 重置 CSS 文件删除并消除了 HTML 元素的不一致默认样式，在 A 级浏览器之间创建了一个公平的竞争环境，并提供了一个坚实的基础，您可以在此基础上明确声明您的意图。

<!-- Source File -->
<link rel="stylesheet" type="text/css" 
      href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
于 2013-01-03T11:15:48.513 回答
1

底部或滚动条出现黑色空间的可能原因是浏览器使用百分比计算的方式。你可以在这里找到解释。

诀窍是在容器外定义 #footer 并设置

#footer{ position: absolute; bottom: 0; width: 100%; height: 9%; }

并且还将#header 的高度设置为9%，以便在计算中考虑到意外情况。

于 2013-01-03T13:13:26.563 回答
-1 
    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, big, strike, strong, sub, sup, tt, var,
b, u, i, center,table, tr, td, th, tbody, thead, tfooter,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; border-spacing: 0; }

将此用作重置，它应该可以工作

于 2013-01-03T11:18:47.203 回答