Question

我试图在网页上保留一个固定的标题，并且滚动时主要内容不会在主标题上移动。

我无法理解为什么内联CSS按预期工作，但是当将相同的CSS属性切换到外部样式表时，它无法工作。正在找到外部样式表，因为第一个<div>正确设置了其属性。我试过在第二个div上同时使用id和class，但似乎都不起作用。这是使用id而不是类的代码。

的index.html：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body style="height:100%; width:100%">
        <div id="fixed-header">
            <h1>Page Heading</h1>
        </div> 
        <div id="main-content">
            <!-- a number of articles and sections -->
        </div>
    </body>
</html>

CSS / style.css文件：

#fixed-header {
    position:fixed;
    height:100px;
    top:0px;
    overflow:hidden;
}

#main-content {
    position:absolute; 
    top:100px; 
    left:0px; 
    right:0px;
    overflow:auto;
}

没有其他CSS代码。

如果我将<div id="main-content">更改为<div style="position:absolute; top:100px; bottom:100px; left:0px; right:0px; overflow:auto;">则可行。

我做错了什么？

Answer 1

这归结为对CSS的基本理解。

如果只指定绝对定位元素的顶部，则该元素的其余部分将正常调整大小（其高度将是元素内部内容的高度）。当一个绝对定位的元素高到足以离开屏幕底部时，会在body / html中创建一个滚动条。

在内容上放置bottom属性会限制内容的高度，因此内容容器元素本身可以单独滚动主体。

https://css-tricks.com/almanac/properties/p/position/

Answer 2

我认为你在这里错过了一个重点。这是浏览器优先选择附加到网页的样式的方式：

INLINE＆gt;在线页面＆gt; EXTERNAL

因此，您必须在应用外部css时删除内联css。

如果你想说得到100px作为结果，那么在外部css文件中，将高度和宽度设置为100px，高度和宽度为100％。

Answer 3

为什么？这是因为你修复了div中100px的div而你关闭了盒子如果你想让你给div宽度0px左边和0px现在你可以说宽度100％所以你给了他（div）一个宽度nov你所说的高度从视图高度的顶部保持100px然后你说从底部保持100px所以你“关闭”框，现在你的溢出可以正常工作我希望解释一点为什么因为什么

Answer 4

你也必须把高度放到html标签上！

看这个jsfiddle

html, body {height:100%}

外部CSS没有实现

4 个答案: