Html 100%高度div内部切断div

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

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

以下是查看它的链接： 除去

正如你所看到的，它被切断了，增加一个大幅度的底部（50px+）似乎可以修复它，但这看起来很糟糕

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

提前谢谢

身高：100%；在大多数浏览器中是相当不一致的。尽量避免

我不完全确定你的布局通常是如何工作的，但是设置overflow:hidden；在CSS中的所有内容上，重置将从一开始就让事情变得不稳定

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

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

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

---

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

来自main-style.css第5行：

overflow:hidden

和main-style.css第127行：

overflow-y:auto

都会导致页面底部被切断。然而，当你纠正这一点时，就会发现你的包装div没有延伸到100%的窗口高度（因为背景渐变在页面结束之前就停止了），并且你的主div中的内容变得不稳定。这些是其他海报讨论过的问题，它们是正确设置页面格式的主要障碍

请看看这个，它在Chrome、FF、IE 6-8和Safari中工作

还不确定如何解决100%高度问题，但要解决浮动div内容问题，请确保在左侧和右侧浮动内容上声明50%的宽度 （此外，您还可以使右浮动内容

文本对齐：right

，以使其真正保持在div的右侧）

发件人：12345678

日期：123456789

1234567890

---

也许有人可以插话来解决目前造成的100%身高问题。我意识到这不是一个完整的答案，我的解决方案以不同的方式打破了这一页，但也许它将成为您或其他可能拥有解决方案的人的起点。

没有任何代码示例可供使用真糟糕。必须深入查看源代码。我不深入查看源代码，这就是为什么您使用Chrome的Inspect元素功能！我们的回答对你有帮助吗？非常感谢。因此，在删除oveflow:hidden on everything之后，我将如何删除顶栏的额外高度？看看这个解决方案。让我知道你的想法。谢谢，但是在移除隐藏的溢出后，我如何从顶部栏移除额外的高度？这是一个线条高度问题。在H1规则中，需要更改该值。从线高度开始：1米；然后根据需要调整填充/边距。另外，不知道为什么要将头包装在id为“header”的div中。为了简化事情，你应该去掉它。任何H1都没有行高规则。我现在很困惑：@lollright。我是说你应该增加一条线的高度规则来缓解顶部的空间问题。

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