100%高度在后端的WordPress容器中只有CSS



Wordpress在后端有这个html结构...

<!DOCTYPE html>
<html ...>
<head>
...
</head>
<body class="wp-admin ...">
...
<div id="wpwrap">
<div id="adminmenumain" role="navigation" aria-label="Main menu">
...
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
...
</div>
</div>
<div id="wpcontent">
...
<div id="wpbody" role="main">
<div id="wpbody-content">
<div id="screen-meta" class="metabox-prefs">
...
</div>
<div class="myplugin">
...
</div>
</div>
</div>
</div>
<div id="wpfooter" role="contentinfo">
<p id="footer-left" class="alignleft">
...
<div class="clear"></div>
</div>
</div>
</body>
</html>

默认情况下,#wpwrap 具有 100% 的高度,我的问题是我需要 100% 高度的 #wpcontent、#wpbody 和 #wpbody 内容,因为我的插件 (.myplugin( 在侧边栏和一个内容区域内,我需要两者的高度为 100%......

我已经尝试了几件事...随着表格单元格 #adminmenumain 中断,我不想碰 #wpcontent 之外的东西......具有绝对位置... 如果我在 myplugin 中有滚动,#wpfooter 中断

可能用几行jquery我可以解决问题,但我真的只想用CSS来做

也许有人安装了wordpress,检查一点代码可以给我一些建议......谢谢!

使用min-height: 100vh;, 所有现代浏览器都支持它们,除了 Opera Mini 浏览器。 https://caniuse.com/#search=vh

但是,您可以始终使用旧的"height: 100%"选项为不支持视口相对长度的浏览器提供回退。 但是要让它工作。添加一点点:

html, body{
height:100%;
}

最新更新