固定页眉/页脚+内容高度100％导致不希望的垂直滚动 [英] Fixed Header/Footer + Content height 100% cause undesired vertical Scrolling

问题描述

我想实现一个具有固定页眉和页脚的水平滚动网站。

I am trying to achieve a a horizontal scrolling website with a fixed header and footer.

目标：
1.固定页眉和页脚
2.没有垂直滚动
3.内容div填充页眉和页脚之间的所有空格

Goals: 1. Fixed Header and Footer 2. No vertical scrolling 3. Content div fills all space between the header and footer

我在内容中使用position：absolute，以确保高度： 100％占用页眉和页脚之间的区域。 （我的第三个目标）
然而，这也导致出现垂直滚动条。

I used position: absolute on the content to make sure the height:100% takes up the area between the header and the footer. (my third goal) However this also causes a vertical scrollbar to appear.

现场演示：
http：// jsfiddle.net/wQ2XR/230/

如果没有垂直滚动条，我该如何实现我的目标？

how can i achieve my goals without a vertical scrollbar to appear?

提前多谢！

HTML代码：

    <div id="total">
        <header id="1">
            <div id="a">
                    <h1>Header</h1>

            </div>
        </header>

        <div id="2">
            <div id="b">
                <div id="bb">
                    <h2>Post Title Example One</h2> 
                <p>hello world! Have you thoroughly searched for an answer before asking your question? </p>
                </div>
            </div>
        </div>
        <footer id="3">
            <div id="c">
                    <h1>footer</h1>

            </div>
        </footer>
    </div>

css：

body, html {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    width: 100%;
}

header {
}

#a {
    position: fixed;
    height: 50px;
    top: 0;
    width: 100%;
    background-color: blue;
}

 #2 {
    position: relative;
    padding: 50px 0 25px 0;
}

#b {
    height: 100%;
    position: absolute;
}

#bb {
    position: relative;
    height: 100%;
    margin: 50px 0 0 0;
    width: 2000px;
    background-color: yellow;
}

 footer {
}

#c {
    position: fixed;
    height: 25px;
    bottom: 0;
    width: 100%;
    background-color: green;
}

推荐答案

您的内容在页眉和页脚之间的包装器采用 height：100％视口的高度。所以，当你应用一个页边距来垂直偏移那些内容封装（以便标题变得可见）时，它们会被视口（50px，标题的高度）下方很大的推动。因此，您会看到一个垂直滚动条，因为内容封装容器是视口和的完整高度，因此它们无法在屏幕上显示。

Hmmm, the problem is that the wrapper(s) around your content between the header and footer are taking on the height of the viewport with height:100%. So, when you apply a margin to vertically offset those content wrappers (so that the header becomes visible), they get pushed by that much below the viewport (50px, height of the header). As a result, you get a vertical scrollbar, since the content wrappers are both the full height of the viewport and pushed down - so they can't fit on-screen.

如何避免这种情况？好吧，如果你的页脚和标题的高度不是动态的（即，你总是可以控制他们通过你的CSS的高度），你可以用一个相当直接的方式用 position ：absolute 。

How to avoid this? Well, if your footer and header height won't be dynamic (ie. You'll always be in control of how tall they are through your CSS), you can achieve this in a fairly straightforward manner with position:absolute.

我删除了＃2 和 #b 元素，因为它看起来像是正确的位置/ code> #bb ，包含实际内容的元素：

Your structure I modified slightly; I removed the #2 and #b elements, since it looks like they were just there to properly position/size #bb, the actual content-containing element:

<div id="total">
    <header id="1">
        <div id="a">
            <h1>Header</h1>
        </div>
    </header>
    <div id="bb">
        <h2>Post Title Example One</h2> 
        <p>hello world! Have you thoroughly searched for an answer before asking your question?</p>
    </div>
    <footer id="3">
        <div id="c">
            <h1>footer</h1>
        </div>
    </footer>
</div>

现在，使用CSS，我删除了样式的定义＃2 和 #b 。此外，我修改 #bb CSS如下：

Now, with your CSS, I removed the definitions for styling #2 and #b. Additionally, I modified the #bb CSS to read as:

#bb {
    position: absolute;
    top: 50px;
    bottom: 25px;
    width: 2000px;
    background-color: yellow;
}

这是一个更新JSFiddle 来演示这是如何实现的。此外，这里有一个 JSFiddle实现您的多行布局，您在其中一个答案中作为注释。

Here's an updated JSFiddle to demonstrate what this achieves. Additionally, here's a JSFiddle implementing your multiple-row layout which you gave as a comment in one of the answers.

overflow：hidden 不能工作的原因是因为 #bb 实际上仍然会扩展到视口以下 - 只是，不会创建垂直滚动条，因为溢出区域被浏览器忽略。但是，当使用百分比高度时，显然 #bb 的高度不是可见的。反正，希望这有助于！如果这不是你想要的，让我知道，我会很乐意进一步帮助。祝你好运！

The reason why overflow:hidden doesn't quite work is because #bb would actually still extend below the viewport - just, no vertical scrollbar would be created because that overflowing region is ignored by the browser. However, when you use a percentage height, it becomes apparent that the height of #bb is not that which is visible. Anyways, hope this helps out! If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!

这篇关于固定页眉/页脚+内容高度100％导致不希望的垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！