为什么导航栏会阻止我网站的最终内容？ [英] Why is the navigation bar blocking the end content of my website?

问题描述

如果滚动到底部，则可以看到菜单阻止了结束内容。我做错了什么？



我的尝试：



尝试创建保证金属性：保证金：0自动;



仍然没有运气。需要一个地方开始。

If you scroll to the bottom, you can see that the menu is blocking the ending content. What am I doing wrong ?

What I have tried:

Tried creating the margin attribute to : margin: 0 auto;

Still no luck. Need a place to start.

推荐答案

请参阅我对该问题的评论。不幸的是，我过早地称赞了你的设计。实际上，从一开始就是错的;它只是创造了几乎正确的印象。



另外，我无法解决你阻止最终问题，因为它还不清楚。我只能看到我在评论中所说的内容，即关注后的图像被剪切掉了。最有可能的是，这与你想描述的相同。



我查看你的CSS并发现了正在发生的事情。这很简单。您只需对底部ul元素使用固定定位（home，about等）。此元素重叠页面的其余部分。在向下滚动之前，这一点并不明显。



没有什么能解决这种设计问题。当元素与其他元素重叠时，它将保持重叠。要为这个底部留出空间而不重叠，你必须为你的首页使用固定的位置（这可能是一个单独的div）。但是，您必须计算顶部和底部的宽度，以便完美贴合，并在浏览器高度变化时重新计算。这很简单，但你必须添加一些JavaScript（我不知道没有JavaScript的解决方案）。



我还建议添加不可滚动的顶部部分。我的想法是这样的：首先，创建具有零填充和边距的CSS并创建两个部分。然后您可以简单地计算所需的高度。计算应响应浏览器窗口大小的更改（例如，将处理程序分配给 window.onresize ）。在这两个顶级水平带内，您可以插入带有所需填充和边距的内部元素。



您可以找到此类设计的样本，特别是在此文章： Modrat Popup From Scratch （在演示中）。



关于设计方面的几句话。你知道那里最糟糕的是什么吗？ 3柱设计，右侧有巨大的空白空间。摆脱它。这是一个常见的设计错误，它真正用于拼贴许多网站。甚至不要考虑这样离开。

-SA

Please see my comment to the question. Unfortunately, I praised your design prematurely. Actually, it's wrong from the very beginning; it just created the impression of something "almost correct".

Also, I cannot address you "blocking the end problem", because it's not clear. I can only see what I said in the comment, that the image after "follow then" is cut. Most likely, this is the same what you meant to describe.

I looked at your CSS and found what's going on. It's simple. You simply used a fixed positioning for the bottom ul element ("home", "about", etc.). This element overlaps the rest of the page. It is not noticeable until you scroll down.

Nothing can fix this kind of design. When an element overlaps other elements, it will keep overlapping. To leave a room for this bottom part without overlaps, you have to use fixed position for your top page as well (which could be a separate div). But then you have to calculate widths of the top and bottom portion, to make a perfect fit, and recalculate it when the browser height changes. This is fairly simple, but you would have to add some JavaScript (I don't know a solution without JavaScript).

I also advised to add non-scrollable top part. My idea is this: first, create CSS with zero padding and margin and create two parts. Then you can simply calculate required heights. The calculation should respond to change of browser window size (say, assign a handler to window.onresize). Inside these two top-level horizontal bands, you can insert inner elements with required padding and margins.

You can find a sample of such design, in particular, in this article: Modal Popup From Scratch (in the demo).

Few words on the design aspects. Do you know what is worst there? The 3-column design with huge empty space on left on right. Get rid of it. This is a common design mistake which really used to plaque many sites. Don't even think about leaving it this way.

—SA

这篇关于为什么导航栏会阻止我网站的最终内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！