I am developing a website which is 100% height and width. There is a panel stuck to the left and the main content area to the right, which is scrollable.
我正在开发一个100%高度和宽度的网站。左侧有一个面板,右侧有一个主要内容区域,可以滚动。
However, in the content area the last div inside is getting cut off. I cannot see why. I have tested this on Firefox and Chrome, both are doing the same.
但是,在内容区域中,最后一个div内部被切断了。我不明白为什么。我在Firefox和Chrome上测试了这个,两者都是这样做的。
Here's the link to see it: removed
这是查看它的链接:已删除
As you can see, it is cut off, adding a large margin-bottom (50px +) seems to fix it, but that just looks bad.
正如你所看到的那样,它被切断了,增加一个大的底部(50px +)似乎可以修复它,但这看起来很糟糕。
PS: Don't worry about the missing images, it's because I've only uploaded this page, not the entire website.
PS:不要担心丢失的图像,这是因为我只上传了这个页面,而不是整个网站。
Thanks in advance
提前致谢
3 个解决方案
#1
4
- Height: 100%; is fairly inconsistent across most browsers. Try to avoid it.
- I'm not entirely sure how your layouts usually work, but setting overflow: hidden; on everything in your CSS reset is going to make things wonky from the start.
身高:100%;在大多数浏览器中相当不一致。尽量避免它。
我不完全确定你的布局通常如何工作,但设置溢出:隐藏;在CSS重置的所有内容中,从一开始就会让事情变得困难。
Take out "overflow: hidden;" and you can see the problem. Your content pane is matching the height of your body, as such, you're losing the height of "topBar" on the bottom of the page. because the Body is hiding the overflow.
取出“溢出:隐藏;”你可以看到问题。您的内容窗格与您的身体高度相匹配,因此,您正在丢失页面底部“topBar”的高度。因为Body正在隐藏溢出。
#2
1
Yup -- try overflow:scroll; or overflow:visible; In addition, I'd see if you can make it work without float:right;, 'cos that takes it out of the normal flow of things and can wreak havoc with your box adjustments.
是的 - 尝试溢出:滚动;或溢出:可见;另外,我会看看你是否可以让它在没有浮动的情况下工作:对吧,'cos将它从正常的物品流中取出并且可以对你的盒子调整造成严重破坏。
ETA: I think I see the problem; each of your little content divs has floats left and right, which is gonna render margins useless, 'cos as far as the browser is concerned, each box's content is out of the normal flow of the page.
ETA:我想我看到了问题;你的每个小内容div都有左右浮动,这会使边距变得无用,'就浏览器而言,每个框的内容都超出了页面的正常流程。
ETA(2): You have overflow:hidden; in your big first rule, where you set default styles for like a hundred different elements. That's your main problem. Change that to overflow:visible; (or whatever you prefer) and set appropriate overflow properties elsewhere and you oughta be good. I was able to mitigate the issue by doing this. There's still tweaking required, but that solves the base problem. I would still get rid of the inline floats, too.
ETA(2):你有溢出:隐藏;在您的第一个规则中,您可以为一百个不同的元素设置默认样式。那是你的主要问题。改变溢出:可见; (或者你喜欢的任何东西)并在别处设置适当的溢出属性,你应该是好的。通过这样做,我能够缓解这个问题。仍然需要调整,但这解决了基本问题。我仍然会摆脱内联浮动。
#3
0
From main-style.css line 5:
从main-style.css第5行:
overflow:hidden
and main-style.css line 127:
和main-style.css第127行:
overflow-y:auto
are both causing the page to cut off the bottom. However, when you correct this, it reveals that your wrapper div isn't stretching to 100% of the window height (because the background gradient stops WAY before the page ends), and the content inside your main divs go wonky. These are things that the other posters have discussed being major obstacles in your page formatting correctly.
都会导致页面切断底部。但是,当你更正这一点时,它会显示你的包装器div没有拉伸到窗口高度的100%(因为背景渐变在页面结束前停止了WAY),并且主div中的内容变得不稳定。这些是其他海报所讨论的事情,正确地构成了页面格式的主要障碍。
Please take a look at this JsFiddle here. It is working in Chrome, FF, IE 6-8 and Safari.
请在这里看看这个JsFiddle。它适用于Chrome,FF,IE 6-8和Safari。
Not sure how to fix the 100% height problem yet, but to solve the floated div content problem, make sure you declare a width of 50% on both the left and right-floated content (also, you can make the right-floated content text-align:right in order to make it REALLY stay to the right of the div).
不知道如何解决100%高度问题,但要解决浮动div内容问题,请确保在左右浮动内容上声明宽度为50%(同样,您可以制作右浮动内容text-align:对,以使它真正保持在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>
Perhaps someone could chime in with a fix for the 100% height issue this is causing now. I realize this isn't a complete answer, and my solution breaks the page in a different way, but perhaps it will be a jumping off point to you or someone else who may have the solution.
也许有人可以解决现在导致的100%高度问题。我意识到这不是一个完整的答案,我的解决方案以不同的方式打破了页面,但也许这对你或其他可能有解决方案的人来说是一个跳跃点。
#1
4
- Height: 100%; is fairly inconsistent across most browsers. Try to avoid it.
- I'm not entirely sure how your layouts usually work, but setting overflow: hidden; on everything in your CSS reset is going to make things wonky from the start.
身高:100%;在大多数浏览器中相当不一致。尽量避免它。
我不完全确定你的布局通常如何工作,但设置溢出:隐藏;在CSS重置的所有内容中,从一开始就会让事情变得困难。
Take out "overflow: hidden;" and you can see the problem. Your content pane is matching the height of your body, as such, you're losing the height of "topBar" on the bottom of the page. because the Body is hiding the overflow.
取出“溢出:隐藏;”你可以看到问题。您的内容窗格与您的身体高度相匹配,因此,您正在丢失页面底部“topBar”的高度。因为Body正在隐藏溢出。
#2
1
Yup -- try overflow:scroll; or overflow:visible; In addition, I'd see if you can make it work without float:right;, 'cos that takes it out of the normal flow of things and can wreak havoc with your box adjustments.
是的 - 尝试溢出:滚动;或溢出:可见;另外,我会看看你是否可以让它在没有浮动的情况下工作:对吧,'cos将它从正常的物品流中取出并且可以对你的盒子调整造成严重破坏。
ETA: I think I see the problem; each of your little content divs has floats left and right, which is gonna render margins useless, 'cos as far as the browser is concerned, each box's content is out of the normal flow of the page.
ETA:我想我看到了问题;你的每个小内容div都有左右浮动,这会使边距变得无用,'就浏览器而言,每个框的内容都超出了页面的正常流程。
ETA(2): You have overflow:hidden; in your big first rule, where you set default styles for like a hundred different elements. That's your main problem. Change that to overflow:visible; (or whatever you prefer) and set appropriate overflow properties elsewhere and you oughta be good. I was able to mitigate the issue by doing this. There's still tweaking required, but that solves the base problem. I would still get rid of the inline floats, too.
ETA(2):你有溢出:隐藏;在您的第一个规则中,您可以为一百个不同的元素设置默认样式。那是你的主要问题。改变溢出:可见; (或者你喜欢的任何东西)并在别处设置适当的溢出属性,你应该是好的。通过这样做,我能够缓解这个问题。仍然需要调整,但这解决了基本问题。我仍然会摆脱内联浮动。
#3
0
From main-style.css line 5:
从main-style.css第5行:
overflow:hidden
and main-style.css line 127:
和main-style.css第127行:
overflow-y:auto
are both causing the page to cut off the bottom. However, when you correct this, it reveals that your wrapper div isn't stretching to 100% of the window height (because the background gradient stops WAY before the page ends), and the content inside your main divs go wonky. These are things that the other posters have discussed being major obstacles in your page formatting correctly.
都会导致页面切断底部。但是,当你更正这一点时,它会显示你的包装器div没有拉伸到窗口高度的100%(因为背景渐变在页面结束前停止了WAY),并且主div中的内容变得不稳定。这些是其他海报所讨论的事情,正确地构成了页面格式的主要障碍。
Please take a look at this JsFiddle here. It is working in Chrome, FF, IE 6-8 and Safari.
请在这里看看这个JsFiddle。它适用于Chrome,FF,IE 6-8和Safari。
Not sure how to fix the 100% height problem yet, but to solve the floated div content problem, make sure you declare a width of 50% on both the left and right-floated content (also, you can make the right-floated content text-align:right in order to make it REALLY stay to the right of the div).
不知道如何解决100%高度问题,但要解决浮动div内容问题,请确保在左右浮动内容上声明宽度为50%(同样,您可以制作右浮动内容text-align:对,以使它真正保持在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>
Perhaps someone could chime in with a fix for the 100% height issue this is causing now. I realize this isn't a complete answer, and my solution breaks the page in a different way, but perhaps it will be a jumping off point to you or someone else who may have the solution.
也许有人可以解决现在导致的100%高度问题。我意识到这不是一个完整的答案,我的解决方案以不同的方式打破了页面,但也许这对你或其他可能有解决方案的人来说是一个跳跃点。