Question

我一直在试图让侧边栏固定在一个中心div上，而且我主要在Firefox和IE中工作，但由于某些原因它在Chrome中不起作用。我的问题是，当我调整窗口大小时，左侧边栏不再延伸到chrome的页面底部。所有代码都包含在下面，因此您可以在自己的浏览器中看到我所看到的内容。

我的问题是：为什么Chrome会以这种方式行事，有没有办法解决这个问题？我的Chrome版本是28.0.1500.95。

感谢。

HTML：

<html>
<header>
    <link rel="stylesheet" href="test.css"/>
</header>
<body style="margin:0">
    <div>
        <div class="width main table">
            <div class="relative-float-left" style=" width:0px; height: inherit; ">
                <div class="relative-float-left sidebar table">
                    --Some lorem ipsum here--
                    <br style="clear: both; " />
                </div>
            </div>
            <div class="relative-float-left content">
                   --Some lorem ipsum here--
            </div>
            <br style="clear: both; " />
        </div>
    </div>
</body>

CSS：

.relative-float-left {position:relative; float:left;}
.width {width:33%;}
.table {display:table;height:100%;}
.sidebar {width:30px;right:45px;background-color:yellow;}
.content {margin-left: 10px; width: 95%; background-color: orange;}
.main {background-color:blue; width:50%; margin:auto;}

编辑：我希望中心div动态调整大小并固定边栏。侧边栏内的内容无法剪裁，我希望任何无法放入页面的内容都被推下并使页面变大（因此我不想对内容（橙色）div使用内部滚动。抱歉对于凌乱的代码，测试概念证明更容易。

我还重写了代码，为它提供了一个样式表，以便于阅读。我真的很想回答，因为我不知道为什么会这样。它可能与此answer.

有关

Answer 1

您的来源中有<header>而不是<head>。这会导致文档无效，不是因为您无法在该位置使用标题 - 浏览器会自动在那里插入<body>开始标记，然后将标题放在其中 - 但是因为有{{1它应该在头部，而不是在身体中。然后在身体已经打开时有一个<link>开始标记，这也是不允许的。

编辑：我看到你现在编辑了你的评论，这是否意味着你不再相信这是问题的原因？

Chrome显示问题：表格

1 个答案: