描述：我要实现一个 fluid layout, 左右结构（左定宽、右100%填充；右边子容器是上下结构，上结构定高，下结构100%填充）。
思路：用 table-cell 实现左右（没有用 float），右边的上下结构采用 box-sizing: border-box;（即 padding-top + height, padding-top 的值就是 上结构的定高）
进坑：由于用了 table-cell 进行父元素的布局，在浏览器调试中看 padding-top + height = 父元素高，但是其元素会缩写，导致下方留白。
我认为是 table-cell 的居中对齐导致的（没有深究）。
出坑：在 table-cell 元素与其子元素之间加一层 div(style="position:relative;height:100%;")，使其子元素抛离 table-cell 对齐方式。成功！
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<title>HTML5 Studio</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
div { box-sizing: border-box; }
.container { display: table; position: relative; height: 100%; }
.toolbar { display: table-cell; min-width: 100px; height: 100%; }
.mainSection { display: table-cell; position: relative; width: 100%; height: 100%; }
.mainSection > div { position: relative; height: 100%; }
.navigator { position: absolute; top: 0; left: 0; width: 100%; height: 50px; z-index: 1; }
.editor { position: relative; height: 100%; padding-top: 50px; }
.editor > div { display: block; position: relative; height: 100%; width: 100%; }
.toolbarDetals { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.5; }
.studio { display: block; height: 100%; }
@media (min-width: 992px) {
.editor > div { display: table; }
.toolbarDetals { display: table-cell; position: relative; width: auto; min-width: 200px; opacity: 1; }
.studio { display: table-cell; width: 100%; }
}
.editor { background-color: silver; }
.navigator { background-color: gray; }
.toolbar { background-color: red; }
.studio { background: url(‘img/bg.jpg‘) no-repeat; background-size: cover; }
.toolbarDetals { background-color: yellowgreen; }
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
<input type="button" value="test" onclick="test()" />
</div>
<div class="mainSection">
<div>
<div class="navigator"><span><1></span></div>
<div class="editor">
<div>
<div class="toolbarDetals" id="toolbarDetals"></div>
<div class="studio"></div>
</div>
</div>
</div>
</div>
</div>
<script>
function test() {
var container = document.getElementById("toolbarDetals"),
display = container.style.display;
if (display === "none") {
container.style.display = "block";
} else {
container.style.display = "none";
}
}
</script>
</body>
</html>
layout
推荐： box-sizing: border-box; 好处大大滴！！
时间： 2024-10-07 09:46:23