2

我正在开发一个高度和宽度为 100% 的网站。左侧有一个面板，右侧是主要内容区域，可滚动。

但是，在内容区域中，里面的最后一个 div 被截断了。我不明白为什么。我已经在 Firefox 和 Chrome 上对此进行了测试，两者都在做同样的事情。

这是查看它的链接： 已删除

正如你所看到的，它被切断了，添加一个大的边距底部（50px +）似乎可以解决它，但这看起来很糟糕。

PS：不用担心图片丢失，因为我只上传了这个页面，而不是整个网站。

提前致谢

4

3 回答 3

5
  1. 高度：100%；在大多数浏览器中相当不一致。尽量避免它。
  2. 我不完全确定您的布局通常是如何工作的，但设置溢出：隐藏；在您的 CSS 重置中的所有内容都会从一开始就让事情变得不稳定。

取出“溢出：隐藏；” 你可以看到问题。您的内容窗格与您的身体高度相匹配，因此，您将失去页面底部“topBar”的高度。因为身体隐藏了溢出。

于 2012-06-01T16:55:27.153 回答
2

是的——试试溢出：滚动；或溢出：可见；此外，我想看看你是否可以在没有 float:right; 的情况下让它工作，因为这会使其脱离正常的流程，并且会对你的盒子调整造成严重破坏。

ETA：我想我看到了问题；您的每个小内容 div 都有左右浮动，这会使边距变得无用，因为就浏览器而言，每个框的内容都超出了页面的正常流程。

ETA(2)：你有溢出：隐藏；在您的第一条规则中，您可以为一百个不同的元素设置默认样式。那是你的主要问题。将其更改为溢出：可见；（或任何你喜欢的）并在其他地方设置适当的溢出属性，你应该会很好。我能够通过这样做来缓解这个问题。仍然需要进行调整，但这解决了基本问题。我仍然会摆脱内联浮动，也是。

于 2012-06-01T17:03:13.940 回答
0

从 main-style.css 第 5 行：

overflow:hidden

和 main-style.css 第 127 行：

overflow-y:auto

都导致页面切断底部。但是，当您更正此问题时，它表明您的包装 div 没有拉伸到 100% 的窗口高度（因为背景渐变在页面结束之前停止），并且主 div 内的内容变得不稳定。这些是其他发帖人讨论过的，它们是正确设置页面格式的主要障碍。

请在此处查看此 JsFiddle。 它适用于 Chrome、FF、IE 6-8 和 Safari。

不确定如何解决 100% 高度问题，但要解决浮动 div 内容问题，请确保在左右浮动内容上声明 50% 的宽度（另外，您可以制作右浮动内容text-align:right为了使它真正保持在 div 的右侧）。

 <div class="centerText messageWrapper">
        <div class="messgaeHeader">
            <div style="float:left; width:50%">
                From: 12345678<br />
            </div>
            <div style="float:right; width:50%; text-align:right">
                Date: 123456789<br />
            </div>

        </div>
        1234567890
 </div>

也许有人可以解决现在造成的 100% 高度问题。我意识到这不是一个完整的答案，我的解决方案以不同的方式打破了页面，但也许这对你或其他可能有解决方案的人来说是一个起点。

于 2012-06-01T17:55:07.543 回答