我正在开发一个高度和宽度为 100% 的网站。左侧有一个面板,右侧是主要内容区域,可滚动。
但是,在内容区域中,里面的最后一个 div 被截断了。我不明白为什么。我已经在 Firefox 和 Chrome 上对此进行了测试,两者都在做同样的事情。
这是查看它的链接: 已删除
正如你所看到的,它被切断了,添加一个大的边距底部(50px +)似乎可以解决它,但这看起来很糟糕。
PS:不用担心图片丢失,因为我只上传了这个页面,而不是整个网站。
提前致谢
取出“溢出:隐藏;” 你可以看到问题。您的内容窗格与您的身体高度相匹配,因此,您将失去页面底部“topBar”的高度。因为身体隐藏了溢出。
是的——试试溢出:滚动;或溢出:可见;此外,我想看看你是否可以在没有 float:right; 的情况下让它工作,因为这会使其脱离正常的流程,并且会对你的盒子调整造成严重破坏。
ETA:我想我看到了问题;您的每个小内容 div 都有左右浮动,这会使边距变得无用,因为就浏览器而言,每个框的内容都超出了页面的正常流程。
ETA(2):你有溢出:隐藏;在您的第一条规则中,您可以为一百个不同的元素设置默认样式。那是你的主要问题。将其更改为溢出:可见;(或任何你喜欢的)并在其他地方设置适当的溢出属性,你应该会很好。我能够通过这样做来缓解这个问题。仍然需要进行调整,但这解决了基本问题。我仍然会摆脱内联浮动,也是。
从 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% 高度问题。我意识到这不是一个完整的答案,我的解决方案以不同的方式打破了页面,但也许这对你或其他可能有解决方案的人来说是一个起点。