我有一个网页，我希望所有元素都固定到位，这样整个页面就没有滚动条。我有一个标题，左侧有一个菜单，以及一个将出现绘图的区域，然后绘图正下方应该是一个列表。
页眉和绘图区域之间有一个我无法摆脱的差距。我已经将边距和填充设置为 0。
另外，绘图应该占据标题下方 60% 的空间，列表应该占据 40%，但两者都不正确，两个元素都在上方结束垂直页面底部。
html,
body {
margin: 0;
padding: 0;
}
.float {
width: 100%;
background-color: blue;
padding-top: 60px;
display: flex;
display: -webkit-flex;
}
.main_title {
width: 70%;
height: 60px;
display: flex;
display: -webkit-flex;
flex-wrap: nowrap;
flex-flow: column;
justify-content: center;
background-color: red;
}
.clock {
width: 30%;
height: 60px;
background-color: green;
}
.header {
display: -webkit-flex;
display: flex;
height: 60px;
position: fixed;
width: 100%;
background-color: red;
margin: 0;
}
.menu {
width: 130px;
flex: 0 0 130px;
background-color: yellow;
height: 100%;
position: fixed;
}
.column_main {
flex: 1;
background-color: purple;
padding-left: 130px;
float: right;
}
.plot-wrapper {
width: 100%;
background-color: brown;
height: 60%;
}
#list {
background-color: lightblue;
width: 100%;
height: 40%;
position: fixed;
}<body>
<div class="header">
<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>
</body>最佳答案
如果我理解你的权利，下面是一种不涉及使用 flex 的方法。
在标题中，我使用 float 将两个元素并排放置。
然后我使用绝对定位来创建 .float 面板，调整顶部偏移以将顶部边缘设置在 header 的正下方，并将其拉伸(stretch)到全宽通过将所有其他偏移量设置为零来降低底部。
然后我使用绝对定位将 .menu 放在左侧，占据 block 的左侧 130px 宽度，然后类似地创建一个 .column_main block ，使其占据剩余空间。
在 .column_main 中，我将 .plot-wrapper 和 #list 作为常规流入元素，并将高度设置为 60%和 40%。我添加了 overflow: auto 以防止任何边距(例如在 p 元素上)折叠并产生不需要的空白。
html, body {
margin: 0;
padding: 0;
}
.header {
height: 60px;
background-color: red;
overflow: auto;
}
.main_title {
float: left;
width: 70%;
height: 60px;
background-color: red;
}
.clock {
float: left;
width: 30%;
height: 60px;
background-color: green;
}
.float {
position: absolute;
left: 0;
right: 0;
top: 60px;
bottom: 0;
}
.menu {
background-color: yellow;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 130px;
}
.column_main {
position: absolute;
left: 130px;
right: 0;
top: 0;
bottom: 0;
background-color: purple;
}
.plot-wrapper {
overflow: auto;
background-color: brown;
height: 60%;
}
#list {
overflow: auto;
background-color: lightblue;
height: 40%;
}<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>关于html - 固定位置填充 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34055885/