Question

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

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

以下是查看链接：除去

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

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

提前致谢

Answer 1

身高：100％;在大多数浏览器中相当不一致。尽量避免它。
我不完全确定你的布局通常如何工作，但设置溢出：隐藏;在CSS重置的所有内容中，从一开始就会让事情变得难以理解。

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

Answer 2

是的 - 尝试溢出：滚动;或溢出：可见;另外，我会看看你是否可以在没有漂浮的情况下使它工作：对吧，'cos将它从正常的物品流中取出并且可以对你的盒子调整造成严重破坏。

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

ETA（2）：你有溢出：隐藏;在您的第一个规则中，您可以为一百个不同的元素设置默认样式。那是你的主要问题。改变溢出：可见; （或者你喜欢的任何东西）并在别处设置适当的溢出属性，你应该是好的。这样做我能够缓解这个问题。仍然需要调整，但这解决了基本问题。我仍然会摆脱内联浮动。

Answer 3

来自main-style.css第5行：

overflow:hidden

和main-style.css第127行：

overflow-y:auto

都会导致页面切断底部。但是，当你更正它时，它会显示你的包装器div没有拉伸到窗口高度的100％（因为背景渐变在页面结束之前停止了WAY），并且主div中的内容变得不稳定。这些是其他海报所讨论的内容，是正确格式化页面格式的主要障碍。

请看一下JsFiddle here.它适用于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％身高问题。我意识到这不是一个完整的答案，我的解决方案以不同的方式打破了页面，但也许这对你或其他可能有解决方案的人来说是一个跳跃点。

100％高度div切除内部div

3 个答案: