Question

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

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

该页面正好显示在 Mozilla Firefox 中我想要的内容。但是，在 Chrome 中，页脚底部和浏览器底部之间会出现黑色空格（约1-2px）。在 Safari 中，右侧会出现一个垂直滚动条。

我正在使用Windows并且没有对任何元素应用任何边距/填充{top或bottom}。

修改＃1

我也在main-content中使用滑块，我必须为某些div指定固定高度。

Answer 1

你提到“主要内容”应该有80％的高度（这与两个10％的值完全相加），但是你的代码（HTML或CSS）中没有任何地方你实际指定了80％。< / p>

我可以在“主要内容”中看到的是一堆嵌套的DIV，它们都具有指定的固定像素高度，因此我不确定它是如何工作的。< / p>

首先将height: 80%;添加到#main-content，摆脱嵌套在#main-content内的所有DIV的所有固定高度，然后找出接下来需要做的事情。

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

Answer 2

欢迎来到网络开发的世界。我建议从CSS重置开始，以确保一致的布局。如果您不想使用雅虎的工具，那么CSS reset的Google就是一个很好的起点。

雅虎提供了很好的工具来促进：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">

Answer 3

您在底部获得黑色空间或滚动条的可能原因是浏览器使用百分比计算的方式。您可以找到解释Here。

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

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

并且还将#header的高度设置为9％以允许计算中的意外事件。

Answer 4

    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; }

使用它作为重置，它应该工作

不同的浏览器显示不同的页面高度

4 个答案: