0

我一直在尝试让侧边栏保持固定在中心 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 使用内部滚动。对不起对于凌乱的代码，测试概念证明更容易。

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

4

1 回答 1

0

你有<header>你的来源而不是<head>. 这会导致文档无效，不是因为您不能在该位置有标题 - 浏览器会自动在其中插入一个<body>开始标签，然后将标题放入其中 - 而是因为其中有一个<link>应该在头部，不在体内。然后<body>在正文已经打开时有一个开始标签，这也是不允许的。

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

于 2013-08-26T14:33:15.173 回答