Example

Question

我有：式

<style>
html, body{
    height:100%;
}
.layout{
    display: box;
    padding: 20px;
    height: 95%;
    width: 95%;
    border-radius: 8px;
    -moz-box-orient: vertical;
    display: -moz-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.layout-middle-row{
    -moz-box-orient: horizontal;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-box-orient: horizontal;
}
.layout-panel-center{
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-flex: 1;
}
div[class*="layout-panel"]
{
    border: 1px solid black;
    border-radius: 6px;
    margin: 3px;
    padding: 5px;
    overflow: hidden;
}
div[class*="layout-panel"]>div[name="content"]{
    height: 100%;
    width: 100%;

    display: -webkit-flex;
    -webkit-flex-direction: column;

}
.grid td{
    border:1px solid red;
}
.grid-cell{
    background-color: white;
    text-indent: 5px;
}
.grid-cell:hover {
    background-color: azure;
}
.multiview{
overflow: auto;
}
</style>

和html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="layout">
    <div class="layout-middle-row">
        <div class="layout-panel-left" style="width:300px;">
            <div name="content">
                <div id="MainMenu_menuPanel" class="menuPanel">
                </div>
            </div>
        </div>
        <div class="layout-panel-center">
            <div name="content">
        <div id="AView" class="multiview" >
        <table class="grid">
        <thead>
        <tr>
        <th>
        Column 1
        </th>
        </tr>
        </thead>
        <tbody>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        <tr><td rowspan="1" class="grid-cell">1</td></tr>
        </tbody>
        </table>
        </div>
        </div>
        </div>
    </div>
</div>
</body>

我需要什么：用于滚动内容中MULTIVIEW内容的滚动条。

我拥有的内容：未激活的滚动条。

我找到了什么：删除＆＃34; DOCTYPE html＆＃34;解决了这个问题，滚动条被激活，布局按预期工作。

所以，问题在于：

我是否遗漏了某些内容，或者使用html5应该使用＆＃34; DOCTYPE html＆＃34;，这相当于html5的doctype？并且此功能假设仅适用于html5 doctype？

如果有人能给我任何至少一些暗示 - 为什么会这样 - 那就太好了。

Example

删除上面一行（DOCTYPE html），它将按预期开始工作。不幸的是，jsfiddle正在添加DOCTYPE忽略DTD设置。

要求

它应该适用于支持html5标准的浏览器
它不必在IE上工作
它不应该使用Javascript（但如果有人有这样的解决方案，那么看看例子会很高兴）

Answer 1

*免责声明：我的解决方案解决了我自己的 flex 问题，无法在页面的其余部分拉伸背景颜色。

我遇到了同样的 flex 解决方案。我发现问题在于 Visual Studio Code 的 '!' html 文档的快捷方式是“”而不是“”

（注意感叹号和 DOCTYPE 之间的空格。）

当我添加空间时，我的页面呈现正确。

另外，如果我保留了默认的VS Code排列，但是在html后面加了一个5，也可以正确渲染：.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

或

<!DOCTYPE html5>
<html>
<head>
</head>
<body>

HTML5 Doctype + flex + overflow无法按预期工作

Example

1 个答案: