Css HTML5 Doctype+；flex+；溢出不'；I don’我没有按预期工作_Css_Html

Css HTML5 Doctype+；flex+；溢出不'；I don’我没有按预期工作

css html

Css HTML5 Doctype+；flex+；溢出不'；I don’我没有按预期工作,css,html,Css,Html,我有：风格 html，正文{ 身高：100%； } .布局{ 显示：框；填充：20px；身高：95%；宽度：95%；边界半径：8px； -莫兹盒方向：垂直；显示器：-moz盒；显示：-网络工具包盒； -网络工具包盒方向：垂直； } .中行布局{ -moz盒方向：水平；显示器：-moz盒；显示：-网络工具包盒； -moz-box-flex:1； -webkit-box-flex:1； -webkit盒方向：水平； } .布局面板中心{ -moz-box-flex:1；箱型柔性

我有：风格


html，正文{
身高：100%；
}
.布局{
显示：框；
填充：20px；
身高：95%；
宽度：95%；
边界半径：8px；
-莫兹盒方向：垂直；
显示器：-moz盒；
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
}
.中行布局{
-moz盒方向：水平；
显示器：-moz盒；
显示：-网络工具包盒；
-moz-box-flex:1；
-webkit-box-flex:1；
-webkit盒方向：水平；
}
.布局面板中心{
-moz-box-flex:1；
箱型柔性：1；
-webkit-box-flex:1；
}
div[class*=“布局面板”]
{
边框：1px纯黑；
边界半径：6px；
保证金：3倍；
填充物：5px；
溢出：隐藏；
}
div[class*=“布局面板”]>div[name=“content”]{
身高：100%；
宽度：100%；
显示：-webkit flex；
-webkit柔性方向：列；
}
.电网运输署{
边框：1px纯红；
}
.网格单元{
背景色：白色；
文本缩进：5px；
}
.网格单元：悬停{
背景颜色：天蓝；
}
.多视图{
溢出：自动；
}

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


第1栏
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.

我需要的是：一个滚动条，滚动内容的多视图内的内容

我有：一个不活动的滚动条

我发现：删除“DOCTYPE html”解决了这个问题，滚动条被激活，布局按预期工作

所以，问题是：

我是否遗漏了一些东西，或者使用html5应该是通过“DOCTYPE html”来完成的，这相当于html5的DOCTYPE？假设这个功能只在html5 doctype中工作

如果有人能给我一些提示，至少关于为什么会发生这种情况，那就太好了

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

要求

它应该在支持html5标准的浏览器上工作

它不必在IE上工作

它不应该使用Javascript（但如果有人有这样的解决方案，那么最好能看到示例）

*免责声明：我的解决方案解决了我自己的问题：flex没有在页面的其余部分延伸背景色

对于flex，我也经历了同样的解决方案。我发现问题在于Visual Studio代码的“！”html文档的快捷方式是“”而不是“”

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

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

此外，如果我保留了默认的VS代码排列，但在html之后添加了5，那么它也会正确呈现：

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

或

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

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