Fatal编程技术网
  • html/
  • Html Chrome显示问题：表

Html Chrome显示问题：表

html css google-chrome

Html Chrome显示问题：表,html,css,google-chrome,Html,Css,Google Chrome,我一直在胡思乱想，试图让一个侧边栏固定在一个中间的div上，我的侧边栏主要在Firefox和IE上工作，但由于某些原因，它在Chrome上不起作用。我的问题是，当我调整窗口大小时，左侧边栏不再延伸到chrome中页面的底部。下面包含了所有代码，因此您可以在自己的浏览器中看到我所看到的内容 我的问题是：为什么Chrome会这样做？我有没有办法解决这个问题？我的Chrome版本是28.0.1500.95 谢谢 HTML: 编辑：我希望中心div动态调整大小，而侧边栏是固定的。侧边栏中的内容无法剪裁，

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

我的问题是：为什么Chrome会这样做？我有没有办法解决这个问题？我的Chrome版本是28.0.1500.95

谢谢

HTML:

编辑：我希望中心div动态调整大小，而侧边栏是固定的。侧边栏中的内容无法剪裁，我希望任何不能放在页面上的内容都被向下推，并使页面更大（因此我不希望对内容（橙色）分区使用内部滚动。很抱歉代码太乱，测试概念验证更容易

我还重写了代码，使其具有更易于阅读的样式表。我真的很想回答这个问题，因为我不知道为什么会发生这种情况。这可能与此有关您的源代码中有
，而不是
。这会导致文档无效，不是因为您不能在其中包含标题位置-浏览器会自动在那里插入一个
开始标记，然后将标题放入其中-但因为其中有一个
，应该在标题中，而不是正文中。然后在正文已打开时有一个
开始标记，这也是不允许的

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

尝试使用灵活的方框。你以后不必处理此类问题。访问@JoshC这是如上所述的布局（左侧边栏沿着一个集中的div）。如果你知道另一种方法，我会非常乐意使用它。我已经编辑了我的问题，以包含更多的要求。Rahul，我会看看这些FlexBox，因为它们看起来非常有希望，但我仍然想知道为什么这在Chrome中不起作用，但在其他浏览器中起作用，以及是否有修复。不确定为什么我投了反对票，我愿意使用人们能给我的任何东西。如果这有帮助的话，我已经做了几次编辑以保持清晰。问题。你的HTML真的有
而不是
？这是一个结构错误，可能会导致浏览器之间显示的许多差异。而且我不太喜欢
显示：表
；浏览器应该通过在内容周围创建一个匿名表行和一个匿名表单元格来处理此问题，但我不确定它们是否都以相同的方式来处理。@MrLister我确实有一个标题标记，它扰乱了html结构。我已经删除了它并编辑了html。我还添加了几个屏幕hots。这是问题的一部分，但不是主要原因。我仍然发现“显示：表格”存在一些问题。我想更好地记录它。抱歉，我的回答有点仓促。没关系，这就是问题所在。我发现我的一个元素缺少一种样式。它现在正在工作。感谢您的帮助！

<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>



.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;}