在我的 html 定义中，我有 4 个 div:wrapper(容器)和 3 个内部垂直对齐:
#wrapper {
width: 80%;
height: 90vh;
margin-top: 5vh;
margin-left: 10%;
margin-right: 10%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #e2e2e2;
border-radius: 5px;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
div.editor {
width: 100%;
height: 60%;
}
#header {
width: 100%;
height: 15%;
min-height: 75px;
}
#footer {
width: 100%;
height: 25%;
min-height: 108px;
display: flex;
flex-direction: row;
justify-content: center;
/* Centering y-axis */
flex-flow: row nowrap;
align-items: center;
}<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Web Editor</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Web Editor</h1>
</div>
<div class="editor" id="editor"></div>
<div id="footer">
</div>
</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>min-height 适用于 header 但不适用于 footer - 可以缩小为零。问题是什么？如何解决？
最佳答案
请更改页脚背景颜色或包装背景颜色，并尝试将高度降低到小于最小高度。您可以检查是否应用了最小高度。
关于html - 为什么最小高度样式对 div 没有影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53481728/